【WebGL特集】第3回：カメラをグリグリ
※この記事は2013年の記事を2018年6月に加筆修正したものです。three.jsの使用バージョンはr92です。
今回は、カメラをマウスでグリグリ動かせるようにしたいと思います。
【前記事】
【WebGL特集】第1回：WebGLって何？
【WebGL特集】第2回：回転する立方体
１、TrackballControls.jsの入手
「three.js-r92/examples/js/controls」にあるTrackballControls.jsを使います。
これはカメラをグリグリ動かすための便利なライブラリです。
three.jsのzipファイルをダウンロードしていない方はGithubから個別に入手してください。
２、ソースの記述
このrackballControls.jsをThree.jsと同様にhtmlで読み込むようにします。今回はwebGL_Lessonの下にjs/controlsというフォルダを作って、そこにTrackballControls.jsを入れます。第2回のソースをベースに修正します。TrackballControls.jsを実装させるには下記でハイライトされている部分、3箇所を追記する必要があります。
<html>
<meta charset="utf-8"/>
<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 );
trackball.rotateSpeed = 5.0; //回転速度
trackball.zoomSpeed = 0.5;//ズーム速度
trackball.panSpeed = 2.0;//パン速度
//ライティング
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 ); //平行光源（色、強度）
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 );
//グリッド
grid = new THREE.GridHelper(600, 10, 0x888888, 0x888888);
grid.position.y = -40;
scene.add(grid);
//レンダラー
renderer = new THREE.WebGLRenderer();
renderer.setSize( 640, 480 );
renderer.setClearColor(new THREE.Color('white'));//背景色の設定
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
trackball.update();
}
</script>
</body>
</html>
See the Pen webGLCamera by 住岡義和 (@mox-motion) on CodePen.
マウスの操作方法は
左ドラック：カメラぐるぐる
中ボタンドラック及びスクロール：ズーム
右ボタンドラック：パン
どうでしょう。ドーナツを四方八方から観察できるようになったでしょうか。３DCGやっている人はお気づきかと思いますがカメラがローリングしてしまいます。これでは水平線がグラグラでちょっと酔ってしまいますよね。解決方法をネットで調べてみたのですが、今のところ解決方法がわかりませんでした。
３、ソースの解説
前回との違いにwindow.addEventListener～がなくなっております。代わりに関数という処理でシーンの設定やレンダリング部分をグループに分けてあげます。でないとTrackballControls.jsは動きません。カメラ、ライトなど、前回とかぶる解説は省略していきます。
TrackballControls.jsの読み込み
<html>
<meta charset="utf-8"/>
<body>
<script src="build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script>
TrackballControls.jsは<body>タグがないと機能しません。
5行目でTrackballControls.jsを読み込みます。もちろんこのままでは動きません。あとで組み込みの処理を行います。
関数の読み込み
init();
animate();
これから記述する二つの関数、init()関数とanimate()関数を実行させます。最後に書きたいところですが、javascriptでは先に書くことになっています。
TrackballControlsの実装
trackball = new THREE.TrackballControls( camera );
trackball.rotateSpeed = 5.0; //回転速度
trackball.zoomSpeed = 0.5;//ズーム速度
trackball.panSpeed = 2.0;//パン速度
カメラをTrackballControls化します。trackballという変数は、2つの関数で使われるのでグローバル変数である必要があります。varを省略するとグローバル変数と認識されるので、ここではvarをつけていません。回転、ズーム速度、パン速度については、必要であれば記述しますが省略しても一応動きます。
グリッドの実装
//グリッド
grid = new THREE.GridHelper(600, 10, 0x888888, 0x888888);
grid.position.y = -40;
scene.add(grid);
3DCGソフトのプレビュー画面にあるようなグリッドを表示させます。GridHelperでサイズ、分割数、色を指定します。
animate関数内で再描画の処理
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
trackball.update();
アニメーションするわけではありませんがanimate関数と書いてありますね。カメラをグリグリするので、結果的に再描画の処理が必要になるということで、animate関数と書いているだけです。TrackballControls.jsを実装するもう一つの大切な要素として、 trackball.update();をanimate関数の中にいれてあげます。前回では最後にanimate();の一文をいれましたが、今回はドーナツは自ら回転しないので必要ありません。以上です。
カメラをグリグリさせるライブラリの「TrackballControls.js」の実装は、まとめると、
１，（5行目）TrackballControls.jsを読み込む
２，（19行目）カメラをTrackballControlsに入れる。
３，（51行目）再描画とともにTrackballControlsも更新させる。
の3箇所の追記が必要になります。
カメラのグリグリに関してはTrackballControls.js以外にもorbitcontrolsが存在します。どちらが使い勝手がいいのかまでは調べていませんが。
Three.jsのOrbitControlsで手軽にカメラを制御する ( WebGL と JavaScript で学ぶ3D表現 )
以上で第3回は終わりです。
次回はBlenderで作ったオリジナルモデルを描画します。
