質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%

解決済

three.jsで矢印キーの入力に合わせてcameraオブジェクトを一定の速度で動かしたい

kisiaaaa
kisiaaaa

総合スコア9

1回答

0評価

1クリップ

272閲覧

投稿2022/01/19 12:24

Three.jsを使ってcameraを動かしたい

javascript

let scene, camera, renderer; let my = 0; let mx = 0; let mz = 10; function init(){ //riticre() //display_x_y_z(); scene = new THREE.Scene(); scene.background = new THREE.Color("skyblue") camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); boxi() box2() camera.position.z = mz; } function boxi(){ const geometry = new THREE.BoxGeometry(2,2,2); const texture = new THREE.TextureLoader().load("./textuer.png"); const material = new THREE.MeshBasicMaterial({map: texture}); let cube1 = new THREE.Mesh(geometry, material); scene.add(cube1); cube1.position.x = -8; cube1.position.y = 0; cube1.position.z = 0; } function box2(){ const geometry1 = new THREE.BoxGeometry(2,2,2); const texture1 = new THREE.TextureLoader().load("./textuer.png"); const material1 = new THREE.MeshBasicMaterial({map: texture1}); let cube2 = new THREE.Mesh(geometry1, material1); scene.add(cube2); cube2.position.x = 0; cube2.position.y = 0; cube2.position.z = 0; } function dispray(){ document.write(camera.position.x); } function animate(){ requestAnimationFrame(animate); addEventListener("keydown", keydownfunc); function keydownfunc(event) { var key_code = event.keyCode; if(key_code === 37) mx = mx-0.001; if(key_code === 38) mz = mz+0.001; if(key_code === 39) mx = mx+0.001; if(key_code === 40) mz = mz-0.001; camera.position.set(mx, my, mz); //camera.position.y =my; //camera.position.z =mz; console.log(mx, my, mz); //renderer.render(scene, camera); } renderer.render(scene, camera); } function onWindowResize(){ camera.aspect = window.innerWidth /window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } init() window.addEventListener("resize", onWindowResize); animate();

実行結果

イメージ説明
このような感じで出力されます。
このコードを実行すると矢印キーに合わせてcameraを動かす所まではうまくいくのですが、操作をしているとだんだん一回ボタンを押したときに動く量がだんだん多くなってcameraが早く動くようになってしまいます。
どのようにしたらこのようなことが起こらず、ずっと一定の速さで動かすことができるようにする方法を教えてください。お願いします

実行環境

google chrome
three.jsのbindフォルダーとcontrolsフォルダーがスクリプトと同じフォルダーにあります。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る