Three.js OrbitControls.js
今回は、Three.jsの「OrbitControls.js」について書きます。
OrbitControls.jsは、マウスドラッグによる視点移動と、マウスホイールによるズームが可能になるクラスです。簡単に言いますと、マウスで視点がグルグル回せるということです。
以前に、「TrackballControls.js」というやつを書きましたが、それと少し似ています。
今回は、実際にやってみたほうが、分かりやすいと思います。
OrbitControlsは、Three.jsに記述されている標準クラスではなく、「OrbitControls.js」に書かれています。
ファイルの場所は、Three.jsダウンロードフォルダ内の
examples/js/controls/OrbitControls.js
にあります。
では、OrbitControlsの読み込み方を書きます。基本的にTrackballControlsの読み込み方法と同じです。
追加するのは、3つです。
①
通常のJavascriptファイルと同じやり方で読み込みます。
<script src="OrbitControls.js"></script>
②
カメラを生成している所に、コチラを追加してください。
//cameraはカメラオブジェクト var controls = new THREE.OrbitControls(camera);
③
毎回の描画の直前でupdate()メソッドを呼びだします。
controls.update();
以上です。たったこれだけで、マウスドラッグによる視点移動と、ホイールによるズームが出来るようになります。
便利ですね(笑)
次に、青い球を表示するプログラムにOrbitControlsを追加した物を書きます。
<!DOCTYPE html> <html> <head> <title>introduction</title> <meta charset="utf-8"> <script src="Three.js"></script> <script src="OrbitControls.js"></script> </head> <body onload="threeStart();" , style="overflow: hidden;"> <script> var width = 800, height = 600; var renderer; function initThree() { renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(width, height); renderer.setClearColorHex(0xFFFFFF, 1); document.body.appendChild(renderer.domElement); renderer.shadowMapEnabled = true; } var camera; var controls; function initCamera() { camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 ); camera.up.x = 0; camera.up.y = 0; camera.up.z = 1; camera.position.set(0, 150, 400); controls = new THREE.OrbitControls(camera); //追加 } var scene; function initScene() { scene = new THREE.Scene(); } var light, light2; function initLight() { light = new THREE.DirectionalLight(0xcccccc,1.6); light.position = new THREE.Vector3(-100, 150, 100); light.castShadow = true; scene.add(light); light2 = new THREE.AmbientLight(0x333333); light2.position.set( light.position.x,light.position.y,light.position.z ); scene.add(light2); } function initObject(){ var cube = new THREE.Mesh( new THREE.SphereGeometry( 100, 50, 50 ), new THREE.MeshPhongMaterial({ color: 0x00FF7 })); scene.add(cube); cube.position.set(0,30,0); } function loop(){ requestAnimationFrame(loop); controls.update();//追加 renderer.clear(); renderer.render(scene, camera); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); loop(); } </script> </body> </html>
実行するとこんな感じです。
最後に、OrbitControlsのプロパティを書きます。
OrbitControlsのプロパティは、これらがあります。
var controls = new THREE.OrbitControls(camera); //①ズーム controls.userZoom = true; //true:ズーム操作可能,false:ズーム操作不可 controls.userZoomSpeed = 1.0; // ズーム速度 //②回転 controls.userRotate = true; //true:回転操作可能,false:回転操作不可 controls.userRotateSpeed = 1.0; //回転速度 //③パン controls.userPan = true; //true:パン操作可能,false:パン操作不可 controls.userPanSpeed = 2.0; //パン速度 //④自動回転 controls.autoRotate = false; //true:自動回転する,false:自動回転しない controls.autoRotateSpeed = 2.0; //自動回転する時の速度 //⑤ controls.minPolarAngle = 0; controls.maxPolarAngle = Math.PI; //⑥ controls.minDistance = 0; //近づける距離の最小値 controls.maxDistance = Infinity; //遠ざかれる距離の最大値
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!