Question

我试图让一个立方体像动画一样顺畅地移动，但只需按一下键。我只能在按住键的同时创建动画。

以下是我一直在使用的一些代码：

<script>
    function init() {
... other code needed ....
            document.addEventListener("keydown", onDocumentKeyDown, false);
                    };

            function onDocumentKeyDown(event) {
                var key = event.which; 
                if (key == 37) {
                    leftAnimation();     
                }
            };
            function leftAnimation() {
                var timer = 0.0001 * Date.now();
                for(var v = 0; v < 10; v++){
                    cube.position.x = Math.cos(timer) * v;
                }
                animate();       
            }
            function animate() {
                requestAnimationFrame(animate);
                render();
            };
            function render() {
                renderer.render(scene, camera);
            }
            init();
            animate();
</script>

Answer 1

leftAnimation()只会在更新帧之前运行整个内部循环运行一次，导致多维数据集只是轻推，而不是动画。

您可以使用固定的运动矢量，而不是初始化为例如null。然后当按下该键时，使用想要移动立方体的x / y [/ z]方向对其进行初始化。

同时将当前向量添加到多维数据集的位置，而不是null。

例如：

// code initialized at this point ...

// vector for motion
var vector = null;

// key handler
document.onkeydown = function(e) {
  e.preventDefault();
  if (e.keyCode === 37) {             // left
    vector = {x: -0.02, y: 0, z: 0};  // fixed vector
  }
};

(function loop() {
  requestAnimationFrame(loop);
  render();
  if (vector) {  // any vector set? if so update position with vector deltas
    cubeMesh.position.x += vector.x;
    cubeMesh.position.y += vector.y;
    cubeMesh.position.z += vector.z;
  }
})();

// render functions here etc. ...

Live example

另一种方法是使用预先初始化为0s的累加向量，其中键可以向向量加或减向量 - 这样您就可以轻轻推动＆＃34;你想要的方向的速度：

// vector for motion
var vector = {x: 0, y: 0, z: 0};

// key handler
document.onkeydown = function(e) {
  e.preventDefault();
  if (e.keyCode === 37) {       // left
    vector.x -= 0.002;
  }
  else if (e.keyCode === 39) {  // right
    vector.x += 0.002;
  }
};

(function loop() {
  requestAnimationFrame(loop);
  render();
  cubeMesh.position.x += vector.x;
  cubeMesh.position.y += vector.y;
  cubeMesh.position.z += vector.z;
})();

Live example

比您提出的要多一点，只是为了更好地了解这个想法 - 如果你只想在x方向上开始移动，你可以简单地使用单个x变量/常数。根据需要采用。

如何使用Three.JS进行单键按键动画

1 个答案: