Q&A
Three.jsを使ってcameraを動かしたい
javascript
1let scene, camera, renderer; 2let my = 0; 3let mx = 0; 4let mz = 10; 5function init(){ 6 //riticre() 7 //display_x_y_z(); 8 scene = new THREE.Scene(); 9 scene.background = new THREE.Color("skyblue") 10 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); 11 renderer = new THREE.WebGLRenderer({antialias: true}); 12 renderer.setSize(window.innerWidth, window.innerHeight); 13 document.body.appendChild(renderer.domElement); 14 boxi() 15 box2() 16 camera.position.z = mz; 17} 18function boxi(){ 19 const geometry = new THREE.BoxGeometry(2,2,2); 20 const texture = new THREE.TextureLoader().load("./textuer.png"); 21 const material = new THREE.MeshBasicMaterial({map: texture}); 22 let cube1 = new THREE.Mesh(geometry, material); 23 scene.add(cube1); 24 cube1.position.x = -8; 25 cube1.position.y = 0; 26 cube1.position.z = 0; 27} 28function box2(){ 29 const geometry1 = new THREE.BoxGeometry(2,2,2); 30 const texture1 = new THREE.TextureLoader().load("./textuer.png"); 31 const material1 = new THREE.MeshBasicMaterial({map: texture1}); 32 let cube2 = new THREE.Mesh(geometry1, material1); 33 scene.add(cube2); 34 cube2.position.x = 0; 35 cube2.position.y = 0; 36 cube2.position.z = 0; 37} 38function dispray(){ 39 document.write(camera.position.x); 40} 41function animate(){ 42 requestAnimationFrame(animate); 43 addEventListener("keydown", keydownfunc); 44 function keydownfunc(event) { 45 var key_code = event.keyCode; 46 if(key_code === 37) mx = mx-0.001; 47 if(key_code === 38) mz = mz+0.001; 48 if(key_code === 39) mx = mx+0.001; 49 if(key_code === 40) mz = mz-0.001; 50 camera.position.set(mx, my, mz); 51 //camera.position.y =my; 52 //camera.position.z =mz; 53 console.log(mx, my, mz); 54 //renderer.render(scene, camera); 55} 56 renderer.render(scene, camera); 57} 58function onWindowResize(){ 59 camera.aspect = window.innerWidth /window.innerHeight; 60 camera.updateProjectionMatrix(); 61 renderer.setSize(window.innerWidth, window.innerHeight); 62} 63init() 64window.addEventListener("resize", onWindowResize); 65animate();
実行結果
このような感じで出力されます。
このコードを実行すると矢印キーに合わせてcameraを動かす所まではうまくいくのですが、操作をしているとだんだん一回ボタンを押したときに動く量がだんだん多くなってcameraが早く動くようになってしまいます。
どのようにしたらこのようなことが起こらず、ずっと一定の速さで動かすことができるようにする方法を教えてください。お願いします
実行環境
google chrome
three.jsのbindフォルダーとcontrolsフォルダーがスクリプトと同じフォルダーにあります。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/01/20 22:12