2011年12月11日日曜日

Three.jsでトラックボール

おはよー!大した記事ではないけど、WebGL駅伝11日目に勝手に割り込みます。
今回はThree.jsで便利なメソッドを一つだけ紹介します。


見ていただきたいサンプルはこれです。
これはテクスチャに対してレンダリングを行うサンプルとして作成したものですが、マウスやキーボードで操作できます。
Aキーを押しながらマウス移動で回転、Sキーを押しながらマウス移動で拡大、Dキーを押しながらマウス移動で並行移動します。
実はこれ、Three.jsの機能で実現可能なのです。

こんな感じでTrackballを作成します。
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
camera.position.z = 20;

trackball = new THREE.TrackballControls(camera, renderer.domElement);
コンストラクタの引数は操作対象のカメラ、レンダリング対象のDOMです。
実はこれだけでほとんど準備は完了です。

あとはフレームごとに次のメソッドを呼び出してカメラを更新してやります。
trackball.update();

これだけです。
デバッグするときなんかに便利ですね!

短いですけどここまで!
皆さんThree.js使ってみてくださいね!

0 件のコメント:

コメントを投稿