2012/08/28

Three.jsで3Dの画面をグリグリ回転させられるTrackballControlsについて

3Dのプログラムを公開するときにマウスで簡単に回転やズームができるとグリグリ動かせて楽しいです(公式のサンプル)。3DPlotColor.jsでも使ってます。

JavaScriptのライブラリThree.jsにはカメラをコントロールするTrackballControlsオブジェクトというのがあります。何行か書くとマウスやキーでのコントロールができるようになります。

ただプロパティまで解説したものがおそらくないので、チュートリアルと一緒に書いてみました。

前提知識としてはだいたい、Three.jsでサンプルを動かしてみてinit()関数やrender()関数がなにをするかを大雑把に把握している人を想定してます。

入門はヨモツネットさんのTHREE.jsでWebGL | ヨモツネットという記事などが詳しくていいと思います。

公式からソースをパクってきた

公式にあるとても短いソースをTrackballControls対応にしました。元々オブジェクトが回転するようになっていたので、そこを削って、背景色がグレーの行を変更/追加しました。

var camera, controls, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 1000;

    controls = new THREE.TrackballControls( camera );

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

    controls.update();

}

1行目で、あとで使うのでcontrolsを新たに宣言してます。

12行目で、TrackballControlsクラスをnewしています。渡すのはカメラです。

35行目のTrackballControlsのupdate()関数で、操作を反映しているようです。

この三行を追加すると、最低限動くようになります。その他は、12行目のあとにでも以下のプロパティで設定します。

TrackballControlsのプロパティ

プロパティの基本的なものは以下です。

controls.rotateSpeed = 1.0; //回転させるときの速さ
controls.zoomSpeed = 1.2; //ズームするときの速さ
controls.panSpeed = 0.3; //パンするときの速さ

controls.noRotate = false; //trueで回転操作を不可にする
controls.noZoom = false; //trueでズーム操作を不可にする
controls.noPan = false; //trueでパンの操作を不可にする

staticMovingプロパティは、iPhoneなどのように回転操作等をやめた瞬間にピタリと止まらないようにします。

staticMovingプロパティがtrueなら、マウスから手を離すとすぐ回転操作等を止めます。falseならdynamicDampingFactorプロパティで指定された係数で回転操作等を減衰させつつ行います。(0<dynamicDampingFactor≦1)

controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;

minDistanceとmaxDistanceプロパティはズームの設定です。以下の値は初期値です。最小の距離が0なのでどこまでも近づくことができ、最大の距離が無限なのでどこまでも遠ざかることができます。

controls.minDistance = 0; //近づける距離の最小値
controls.maxDistance = Infinity; //遠ざかれる距離の最大値

keysプロパティは、キーコードで指定したキー(この場合A・S・D)を押しながらマウスを動かす操作で、回転・ズーム・パンを行えるようにします。

controls.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

そのほかのカメラコントロールについて

他のは解説が難しそうなんでリストだけ載せときます。とりあえず酔います…

FirstPersonControls(公式のサンプル)
マウスを左右に動かしたら左右を見て、クリックで進む、右クリックで戻る、みたいな人の視点ぽいカメラコントロール
OrbitControls(公式のサンプル)
FlyControls(公式のサンプル)
PathControls(公式のサンプル)

コメントを投稿