Three.js 視点の切り替え
今回は、Three.jsの「視点の切り替え方法」について書きます。
今回のやつは、例えて言うなら、キーボードの1を押すと物体を上から見る視点、2を押すと物体を横から見る視点に視点を切り替えられるというものです。
やり方は、とてもシンプルです。
コードを書いていきます。
①
カメラオブジェクトを2つ用意する。
//2つカメラオブジェクトを用意 var camera,top_camera; //2つのカメラを切り替えるフラグ var cameraActive = false; //1つ目のカメラオブジェクト 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); scene.add(camera); //2つ目のカメラオブジェクト top_camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000); scene.add(top_camera); top_camera.position.set(0, 0, 400);
②
cameraActive の値で、レンダラーオブジェクトに入れるカメラオブジェクトを分ける。
if(!cameraActive){ renderer.render(scene, camera); }else{ renderer.render(scene, top_camera); }
③
キーボードでcameraActive の値を変える。(ここは、キーボードじゃなくもいいです。お好みの方法で!)
window.addEventListener("keydown", function(e){ //Jkey if(e.keyCode == 74){ cameraActive=true; } //SpaceKey if(e.keyCode == 32){ cameraActive=false; } }, false);
これで、終わりです。
次に、上のコードを追加したプログラムを書きます。
<!DOCTYPE html> <html> <head> <title>introduction</title> <meta charset="utf-8"> <script src="three.min.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(0xEEEEEE, 1); document.body.appendChild(renderer.domElement); renderer.shadowMapEnabled = true; } var camera,top_camera; var cameraActive = false; 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); scene.add(camera); controls = new THREE.OrbitControls(camera); top_camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000); scene.add(top_camera); top_camera.position.set(0, 0, 400); } 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,0,100); var plane = new THREE.Mesh( new THREE.PlaneGeometry(1000, 1000, 1, 1), new THREE.MeshLambertMaterial({ color: 0x0000ff })); //シーンオブジェクトに追加 plane.reciveShadow = true; scene.add(plane); } function loop(){ requestAnimationFrame(loop); controls.update(); renderer.clear(); if(!cameraActive){ renderer.render(scene, camera); }else{ renderer.render(scene, top_camera); } } function threeStart() { initThree(); initScene(); initCamera(); initLight(); initObject(); loop(); } window.addEventListener("keydown", function(e){ if(e.keyCode == 74){ cameraActive=true; } if(e.keyCode == 32){ cameraActive=false; } }, false); </script> </body> </html>
実行するとこんな感じです。
今回は、ちょっとした小技を書きました。
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!