2017-10-07 22:05:46

License: MIT License

Fork: 1

Fav: 1

View: 713

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 112 lines
HTML 4 lines
CSS 10 lines

Three.js r87でサンプル3DモデルFemaleを表示(WebGL使用)

// forked from siouxcitizen2.0's "Three.js r87でサンプル3DモデルBuffaloを表示(WebGL使用)" http://jsdo.it/siouxcitizen2.0/q6J3
//
//Three.js r87でサンプル3DモデルFemaleを表示してみました　　
//マウスドラッグによる3Dモデルの回転もつけてみました
//
//
//以下の自分のコードを参考にしました
//
//Three.js r70　でサンプル3DモデルFemaleを表示(WebGL使用)
//http://jsdo.it/siouxcitizen/7mPx
//

var scene, renderer;
var camera;
var mesh;

var isMouseDown = false;
 
function init() {
    
    //シーンを作成
    scene = new THREE.Scene(); 
    
    //カメラを作成
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
    camera.position.z = -50; 
    camera.position.y = 50; 
    
    //レンダラーを作成
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize( window.innerWidth, window.innerHeight ); 
    document.body.appendChild( renderer.domElement ); 
    //背景を白にする
    renderer.setClearColor(0xffffff, 1); 
    
    //光源を作成
    var light = new THREE.DirectionalLight("#ffeedd", 1);
    var ambient = new THREE.AmbientLight("#221100");
    light.position.set( 0, -70, 100 ).normalize();
    scene.add(light);
    scene.add(ambient);
    
    //3Dモデル読込
    var loader = new THREE.JSONLoader();
    var callbackFemale = function ( geometry, materials ) { createScene( geometry, materials, 0, -250, -750); };
    loader.load( "http://jsrun.it/assets/8/s/x/K/8sxKD", callbackFemale );
            
    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("touchstart", onMouseDown);
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("touchend", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("touchmove", onMouseMove);

render();   
}

// 3Dモデル読込時コールバック関数
function createScene( geometry, materials, x, y, z) {

mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
	mesh.position.set( x, y, z );
	mesh.scale.set( 4, 4, 4 );
	scene.add( mesh );

}

function render() {
    requestAnimationFrame( render ); 
    renderer.render(scene, camera); 
}

// マウスを押したとき
function onMouseDown(event) {
    isMouseDown = true;
}

// マウスを動かした時
function onMouseMove(event) {
    if (isMouseDown) {
        // 3DモデルをX軸とY軸方向に回転させます
        if ( mesh ) {
            mesh.rotation.y = getMouseX(event)/50;
            mesh.rotation.x = getMouseY(event)/50;

}
    }
}

// マウスを離したとき
function onMouseUp(event) {
    isMouseDown = false;
}

function getMouseX(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientX;
    else
        return event.touches[0].clientX;
}

function getMouseY(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientY;
    else
        return event.touches[0].clientY;
}

window.addEventListener('DOMContentLoaded', init);

Three.js r87でサンプル3DモデルFemaleを表示(WebGL使用)

// forked from siouxcitizen2.0's "Three.js r87でサンプル3DモデルBuffaloを表示(WebGL使用)" http://jsdo.it/siouxcitizen2.0/q6J3 Three.js r87でサンプル3DモデルFemaleを表示してみました　　マウスドラッグによる3Dモデルの回転もつけてみました以下の自分のコードを参考にしました Three.js r70　でサンプル3DモデルFemaleを表示(WebGL使用) http://jsdo.it/siouxcitizen/7mPx // forked from siouxcitizen2.0's "Three.js r87でサンプル3DモデルBuffaloを表示(WebGL使用)" http://jsdo.it/siouxcitizen2.0/q6J3 // //Three.js r87でサンプル3DモデルFemaleを表示してみました　　 //マウスドラッグによる3Dモデルの回転もつけてみました // // //以下の自分のコードを参考にしました // //Three.js r70　でサンプル3DモデルFemaleを表示(WebGL使用) //http://jsdo.it/siouxcitizen/7mPx // var scene, renderer; var camera; var mesh; var isMouseDown = false; function init() { //シーンを作成 scene = new THREE.Scene(); //カメラを作成 camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = -50; camera.position.y = 50; //レンダラーを作成 renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //背景を白にする renderer.setClearColor(0xffffff, 1); //光源を作成 var light = new THREE.DirectionalLight("#ffeedd", 1); var ambient = new THREE.AmbientLight("#221100"); light.position.set( 0, -70, 100 ).normalize(); scene.add(light); scene.add(ambient); //3Dモデル読込 var loader = new THREE.JSONLoader(); var callbackFemale = function ( geometry, materials ) { createScene( geometry, materials, 0, -250, -750); }; loader.load( "http://jsrun.it/assets/8/s/x/K/8sxKD", callbackFemale ); document.addEventListener("mousedown", onMouseDown); document.addEventListener("touchstart", onMouseDown); document.addEventListener("mouseup", onMouseUp); document.addEventListener("touchend", onMouseUp); document.addEventListener("mousemove", onMouseMove); document.addEventListener("touchmove", onMouseMove); render(); } // 3Dモデル読込時コールバック関数 function createScene( geometry, materials, x, y, z) { mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); mesh.position.set( x, y, z ); mesh.scale.set( 4, 4, 4 ); scene.add( mesh ); } function render() { requestAnimationFrame( render ); renderer.render(scene, camera); } // マウスを押したとき function onMouseDown(event) { isMouseDown = true; } // マウスを動かした時 function onMouseMove(event) { if (isMouseDown) { // 3DモデルをX軸とY軸方向に回転させます if ( mesh ) { mesh.rotation.y = getMouseX(event)/50; mesh.rotation.x = getMouseY(event)/50; } } } // マウスを離したとき function onMouseUp(event) { isMouseDown = false; } function getMouseX(event) { if (event.type.indexOf("touch") == -1) return event.clientX; else return event.touches[0].clientX; } function getMouseY(event) { if (event.type.indexOf("touch") == -1) return event.clientY; else return event.touches[0].clientY; } window.addEventListener('DOMContentLoaded', init);  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script> * { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #000; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

siouxcitizen2

URL
https://twitter.com/siouxcitizen

Yahoo Open ID が機能しなくなったのでjsdo.itの第二アカウント作成しました

jsdo.itの第一アカウント http://jsdo.it/siouxcitizen

以下第一アカウントについて混沌としてきたので投稿コードをまとめてみました Naver : http://matome.naver.jp/odai/2142288467101177901

作業用BGMにYoutube動画を連続再生するプログラムもまとめてみました直リンク : http://matome.naver.jp/odai/2143666226200730001 アーティスト別の再生動画の一覧付きリスト : http://matome.naver.jp/odai/2142630899820574901

ブログ : http://oreorekaihatsu.blogspot.jp/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/kNOQ/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

tjoen

Forked

sort by

latest
page views
favorite
forked

Three.js r87でOBJファイル形式3Dモデルを表示

siouxcitizen

133/5/10
- 3D
- 3DModel
- Texture
- Three.js
- WebGL
- art&design
- html5_elements&api
- library&test
- user_interface

Three.js r87でサンプル3DモデルFemaleを表示(WebGL使用)

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked