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

Question

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

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フォルダーがスクリプトと同じフォルダーにあります。

Answer 1

requestAnimationFrame(animate); が毎フレーム呼び出されますが、その度に addEventListener("keydown", keydownfunc); を登録しているからです。

---

    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);
}

以上を、一回だけ実行されるように、animate() の外に置いてみてください。

---

補足
ディスプレイは、dispray ではなく display です！綴りが惜しかったです

Comments

[kisiaaaa]

ありがとうございます解決しました！