ブログ
blog
【WebGL特集】第3回：カメラをグリグリ
※この記事はGoogleChrome9以上 またはFireFox4以上で見てください。
今回は、カメラをマウスでグリグリ動かせるようにしたいと思います。
１、【TrackballControls.jsの入手】
「three.jsexamplesjscontrols」にあるTrackballControls.jsを使います。
これはカメラをグリグリ動かすための便利なライブラリです。
three.jsのzipファイルをダウンロードしていない方はGithubから入手してください。
２、【ソースの記述】
これをThree.jsと同様にhtmlで読み込むようにします。今回はwebGL_Lessonの下にjs/controlsというフォルダを作って、そこにTrackballControls.jsを入れます。TrackballControls.jsを実装させるには下記でハイライトされている部分、3箇所を追記する必要があります。
<html>
<body>
<script src="build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script>
init();
animate();
function init() {
//シーン
scene = new THREE.Scene();
//カメラ
camera = new THREE.PerspectiveCamera( 75, 640/480, 1, 10000 );
camera.position.z = 1000;
trackball = new THREE.TrackballControls( camera );//カメラぐりぐりしたいならこれと・・・
//ライティング
var directionalLight = new THREE.DirectionalLight( 0xffffff, 3 ); //平行光源（色、強度）
directionalLight.position.set(0,0,3);
scene.add( directionalLight );
//トーラスオブジェクト
TorusGeometry = new THREE.TorusGeometry(150,80,10,20 );
TorusMaterial = new THREE.MeshPhongMaterial( { color: 0x6a3906 } );
TorusMesh = new THREE.Mesh( TorusGeometry, TorusMaterial );
TorusMesh.position.y = 200;
scene.add( TorusMesh );
//グリッド
planeGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );
planeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.position.y = -100;
planeMesh.rotation.x = 90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
scene.add( planeMesh );
//レンダラー
renderer = new THREE.WebGLRenderer();//THREE.CanvasRenderer();でもいいけどポリゴンの裏が非表示？
renderer.setSize( 640, 480 );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
trackball.update(); //これ追加
}
</script>
</body>
</html>
マウスの操作方法は
左ドラック：カメラぐるぐる
中ボタンドラック及びスクロール：ズーム
右ボタンドラック：パン
どうでしょう。ドーナツを四方八方から観察できるようになったでしょうか。
３DCGやっている人はお気づきかと思いますが
カメラがローリングしてしまいます。これでは水平線がグラグラでちょっと酔ってしまいますよね。
解決方法をネットで調べてみたのですが、今のところ解決方法がわかりませんでした。
誰か情報あればよろしくお願いします。
３、【ソースの解説】
関数という処理でシーンの設定やレンダリング部分をグループに分けてあげます。でないとTrackballControls.jsは動きません。カメラ、ライトなど、前回とかぶる解説は省略していきます。
<html> <body> <script src="build/three.min.js"></script> <script src="js/controls/TrackballControls.js"></script> <script>
TrackballControls.jsは<body>タグがないと機能しません。
4行目でTrackballControls.jsを読み込みます。もちろんこのままでは動きません。あとで組み込みの処理を行います。
init(); animate();
これから記述する二つの関数、init()関数とanimate()関数を実行させます。最後に書きたいところですが、javascriptでは先に書くことになっています。
trackball = new THREE.TrackballControls( camera );//カメラぐりぐりしたいならこれと・・・
カメラをTrackballControls化します。trackballという変数は、2つの関数で使われるのでグローバル変数である必要があります。
varを省略するとグローバル変数と認識されるので、ここではvarをつけていません。
//グリッド
planeGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );
planeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
planeMesh.position.y = -100;
planeMesh.rotation.x = 90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
scene.add( planeMesh );
3DCGソフトのプレビュー画面にあるようなグリッドを表示させます。ジオメトリとしてthree.jsに用意されているPlaneをワイヤーフレームで表示させることでグリッドを表現します。
37行目の回転値としてのラジアンですが、いつもの角度で入力したいときは、「いつもの角度」の後ろに 「* 2 * Math.PI / 360」;を追記してあげればOKです。この場合「90度」に「* 2 * Math.PI / 360;」を追記して「90 * 2 * Math.PI / 360;」としています。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
trackball.update(); //これ追加
requestAnimationFrameは前回のsetTimeoutの代わりのようなものです。カッコ内に更新したい関数名を入れます。
この場合「カメラの更新とともに再描画する」という命令になります。TrackballControls.jsを実装するもう一つの大切な要素として、 trackball.update();をanimate関数の中にいれてあげます。
カメラをグリグリさせるライブラリの「TrackballControls.js」の実装は、まとめると、
１、（4行目）TrackballControls.jsを読み込む
２、（18行目）カメラをTrackballControlsに入れる。
３、（49行目）再描画とともにTrackballControlsも更新させる。
の3箇所の追記が必要になります。
以上で第3回は終わりです。
次回はBlenderで作ったオリジナルモデルを描画します。