3D场景下JavaScript按键初始移动延迟问题求助

云原生阿岚

2026-8-13

解决GLTF模型键盘平滑移动问题

你的问题根源在于直接在keydown事件中修改位置——这个事件仅在按键按下瞬间触发一次，后续按住按键的重复触发有系统延迟，而且事件触发频率和渲染帧不同步，导致移动不连贯。正确的做法是跟踪按键状态，在渲染循环中每帧更新位置，实现平滑移动。

实现步骤：

用一个对象记录按键的按下/释放状态
监听keydown和keyup事件更新状态
在requestAnimationFrame驱动的渲染循环中，根据按键状态实时更新模型位置

完整示例代码：

// 移动速度
var xSpeed = 0.5;
var zSpeed = 0.5;

// 记录按键状态
const keys = {
  w: false,
  s: false,
  a: false,
  d: false
};

// 监听按键按下
document.addEventListener('keydown', (event) => {
  switch(event.key.toLowerCase()) {
    case 'w': keys.w = true; break;
    case 's': keys.s = true; break;
    case 'a': keys.a = true; break;
    case 'd': keys.d = true; break;
    case ' ': car.position.set(0, 0, 0); break; // 空格重置位置
  }
});

// 监听按键释放
document.addEventListener('keyup', (event) => {
  switch(event.key.toLowerCase()) {
    case 'w': keys.w = false; break;
    case 's': keys.s = false; break;
    case 'a': keys.a = false; break;
    case 'd': keys.d = false; break;
  }
});

// 渲染循环（假设你已有scene、camera、renderer对象）
function animate() {
  requestAnimationFrame(animate);

  // 每帧根据按键状态更新位置
  if (keys.w) car.position.z -= zSpeed;
  if (keys.s) car.position.z += zSpeed;
  if (keys.a) car.position.x -= xSpeed;
  if (keys.d) car.position.x += xSpeed;

  renderer.render(scene, camera);
}
// 启动循环
animate();