Three.js FlyControls.js
今回は、Three.jsの「FlyControls.js」について書きます。
こちらは、マウスやキーボードで視点がグルグル回せる事ができるクラスです。
以前に紹介した、「OrbitControls.js」や「TrackballControls.js」と同じ分類です。
FlyControls.jsの特徴は、空を飛んでいるような視点です。マウスを長押しすると、前に進み、右や左の方にマウスを動かすと、その方向に視点が動きます。
また、キーボードのw,a,s,dを押すと、前後左右に視点を動かせます。
FlyControls.jsは、Three.jsに記述されている標準クラスではなく、「FlyControls.js」に書かれています。
ファイルの場所は、Three.jsダウンロードフォルダ内の
examples/js/controls/FlyControls.js
にあります。
では、FlyControlsの読み込み方を書きます。
①「script src ・・・」で、FlyControls.jsを読み込みます。
<script src="FlyControls.js"></script>
②カメラオブジェクトを生成した後に、これらを追加してください。
//camera:カメラオブジェクトです。 var controls = new THREE.FlyControls(camera); //FlyControlsのプロパティです。こちらは、追加しといたほうが良いと思います。 controls.movementSpeed = 1000; //移動速度 controls.rollSpeed = Math.PI / 24; //回転速度 //その他のプロパティ controls.autoForward = false; //true:自動で移動する,false:自動で移動しない controls.dragToLook = false; //true:ドラッグによる視点移動を禁止する,false:ドラッグによる視点移動をする
③毎回の描画の直前でupdate()メソッドを呼びだします。
var clock = new THREE.Clock(); var delta = clock.getDelta(); controls.update(delta);
以上です。これらを追加すると、マウスやキーボードで視点がグルグル回せる事ができるようになります。
次に、青い球を表示するプログラムにFlyControlsを追加した物を書きます。
<!DOCTYPE html> <html> <head> <title>introduction</title> <meta charset="utf-8"> <script src="three.min.js"></script> <script src="FlyControls.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(0xEEEEEE, 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.FlyControls(camera); //追加 controls.movementSpeed = 1000; controls.rollSpeed = Math.PI / 24; controls.autoForward = false; controls.dragToLook = false; } 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 sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 50, 50 ), new THREE.MeshPhongMaterial({ color: 0x00FF7 })); scene.add(sphere); sphere.position.set(0,30,0); } var clock = new THREE.Clock(); function loop(){ var delta = clock.getDelta(); requestAnimationFrame(loop); controls.update(delta);//追加 renderer.clear(); renderer.render(scene, camera); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); loop(); } </script> </body> </html>
実行するとこんな感じです。
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!