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

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件

ベストアンサー

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

javascript
1    addEventListener("keydown", keydownfunc);
2    function keydownfunc(event) {
3        var key_code = event.keyCode;
4        if(key_code === 37) mx = mx-0.001;
5        if(key_code === 38) mz = mz+0.001;
6        if(key_code === 39) mx = mx+0.001;
7        if(key_code === 40) mz = mz-0.001;
8        camera.position.set(mx, my, mz);
9        //camera.position.y =my;
10        //camera.position.z =mz;
11        console.log(mx, my, mz);
12    //renderer.render(scene, camera);
13}