ブログ

blog

【WebGL特集】第3回:カメラをグリグリ


※2018/05 加筆修正中。three.js-r92に対応作業中です。

今回は、カメラをマウスでグリグリ動かせるようにしたいと思います。

1、TrackballControls.jsの入手

「three.js-r92/examples/js/controls」にあるTrackballControls.jsを使います。
これはカメラをグリグリ動かすための便利なライブラリです。
three.jsのzipファイルをダウンロードしていない方はGithubから個別に入手してください。

2、ソースの記述

これをThree.jsと同様にhtmlで読み込むようにします。今回はwebGL_Lessonの下にjs/controlsというフォルダを作って、そこにTrackballControls.jsを入れます。第2回のソースをベースに修正します。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 );//カメラぐりぐりしたいならこれ
    trackball.rotateSpeed = 5.0; //回転速度
    trackball.zoomSpeed = 0.5;//ズーム速度
    trackball.panSpeed = 2.0;//パン速度
    
    //ライティング
	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 );
    
 	//グリッド
    grid = new THREE.GridHelper(600, 10, 0x888888, 0x888888);
    grid.position.y = -40;
    scene.add(grid);
    
    //レンダラー
    renderer = new THREE.WebGLRenderer();//THREE.CanvasRenderer();でもいいけどポリゴンの裏が非表示?
    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>

マウスの操作方法は
左ドラック:カメラぐるぐる
中ボタンドラック及びスクロール:ズーム
右ボタンドラック:パン

どうでしょう。ドーナツを四方八方から観察できるようになったでしょうか。
3DCGやっている人はお気づきかと思いますが
カメラがローリングしてしまいます。これでは水平線がグラグラでちょっと酔ってしまいますよね。
解決方法をネットで調べてみたのですが、今のところ解決方法がわかりませんでした。
誰か情報あればよろしくお願いします。

3、ソースの解説

関数という処理でシーンの設定やレンダリング部分をグループに分けてあげます。でないと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 );//カメラぐりぐりしたいならこれ
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でサイズ、分割数、色を指定します。

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    trackball.update();   //これ追加

requestAnimationFrameは前回のsetTimeoutの代わりのようなものです。カッコ内に更新したい関数名を入れます。
この場合「カメラの更新とともに再描画する」という命令になります。TrackballControls.jsを実装するもう一つの大切な要素として、 trackball.update();をanimate関数の中にいれてあげます。

カメラをグリグリさせるライブラリの「TrackballControls.js」の実装は、まとめると、
1、(4行目)TrackballControls.jsを読み込む
2、(18行目)カメラをTrackballControlsに入れる。
3、(49行目)再描画とともにTrackballControlsも更新させる。
の3箇所の追記が必要になります。

カメラのグリグリに関してはTrackballControls.js以外にもorbitcontrolsが存在します。どちらが使い勝手がいいのかまでは調べていませんが。
Three.jsのOrbitControlsで手軽にカメラを制御する ( WebGL と JavaScript で学ぶ3D表現 )


以上で第3回は終わりです。
次回はBlenderで作ったオリジナルモデルを描画します。

Mox-Motionに興味をお持ちの方はお気軽にご連絡ください!

採用希望の方は・・・