Three.jsで3Dオブジェクトを動かす

Three.js（r74）で3Dオブジェクトを動かしてみる。動かすのは、以下のコードで作成した立方体。

// シーンの作成
var scene = new THREE.Scene();
// カメラの作成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// レンダラーの作成
var renderer = new THREE.WebGLRenderer();
// レンダラーが描画するキャンバスサイズの設定
renderer.setSize( window.innerWidth, window.innerHeight );
// キャンバスをDOMツリーに追加
document.body.appendChild( renderer.domElement );

// ジオメトリの作成
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// マテリアルの作成
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// オブジェクトの作成
var cube = new THREE.Mesh( geometry, material );
// オブジェクトをシーンに追加
scene.add( cube );

// カメラ位置調整
camera.position.z = 5;
camera.position.x = 0.5;
camera.position.y = 0.5;

// レンダリング
function render() {
    renderer.render( scene, camera );
}
render();

render()をループさせることによってアニメーションさせているので、立方体を動かすコードはrender()内に記述する。ちなみにこのループは1秒間に60回実行される。

function render() {
// requestAnimationFrameで自分自身を呼び出し続けることでレンダリングを繰り返す
requestAnimationFrame( render );

// 立方体をx軸を軸に回転
cube.rotation.x += 0.1;
// 立方体をy軸を軸に回転
cube.rotation.y += 0.1;

renderer.render( scene, camera );
}

3Dオブジェクト自体を動かすのではなく、カメラを動かすことによって3Dオブジェクトが動いているように見せることもできる

function render() {
// requestAnimationFrameで自分自身を呼び出し続けることでレンダリングを繰り返す
requestAnimationFrame( render );

// 立方体を奥に移動
camera.position.x += 0.01;

renderer.render( scene, camera );
}

Three.jsのサイトからダウンロードした圧縮ファイル内にあるTrackballControls.jsを使用して3Dオブジェクトをマウスで動かすこともできる。

１．ダウンロードしたファイルを解凍し、three.js-master\examples\js\controls\TrackballControls.jsを
適当なフォルダにコピーする。ここではjsというフォルダにコピー。

２．htmlからTrackballControls.jsを読み込む。

３． TrackballControlsインスタンスを作成する。

// TrackballControlsインスタンス作成
 var controls = new THREE.TrackballControls( camera );

４．render()内でアップデートする

controls.update();

左クリックでオブジェクトの回転。右クリックで上下左右に移動。ホイールで奥行き方向に移動できる。

• サンプルの表示