【WebGL特集】第3回:カメラをグリグリ
※この記事は2013年の記事を2018年6月に加筆修正したものです。three.jsの使用バージョンはr92です。
今回は、カメラをマウスでグリグリ動かせるようにしたいと思います。
【前記事】
【WebGL特集】第1回:WebGLって何?
【WebGL特集】第2回:回転する立方体
1、TrackballControls.jsの入手
「three.js-r92/examples/js/controls」にあるTrackballControls.jsを使います。
これはカメラをグリグリ動かすための便利なライブラリです。
three.jsのzipファイルをダウンロードしていない方はGithubから個別に入手してください。
2、ソースの記述
この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.
マウスの操作方法は
左ドラック:カメラぐるぐる
中ボタンドラック及びスクロール:ズーム
右ボタンドラック:パン
どうでしょう。ドーナツを四方八方から観察できるようになったでしょうか。3DCGやっている人はお気づきかと思いますがカメラがローリングしてしまいます。これでは水平線がグラグラでちょっと酔ってしまいますよね。解決方法をネットで調べてみたのですが、今のところ解決方法がわかりませんでした。
3、ソースの解説
前回との違いに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」の実装は、まとめると、
1,(5行目)TrackballControls.jsを読み込む
2,(19行目)カメラをTrackballControlsに入れる。
3,(51行目)再描画とともにTrackballControlsも更新させる。
の3箇所の追記が必要になります。
カメラのグリグリに関してはTrackballControls.js以外にもorbitcontrolsが存在します。どちらが使い勝手がいいのかまでは調べていませんが。
Three.jsのOrbitControlsで手軽にカメラを制御する ( WebGL と JavaScript で学ぶ3D表現 )
以上で第3回は終わりです。
次回はBlenderで作ったオリジナルモデルを描画します。