webGL      2018.06.01 ( 最終更新日:2021/01/12 )

【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で作ったオリジナルモデルを描画します。

【WebGL特集】第4回:Blenderでモデル出力

AUTHOR

sumioka