Three.js角色旋转平滑过渡：解决旋转抖动问题

javascript

2024-03-11 17:38:16

Three.js 中平滑旋转角色控制：彻底解决旋转抖动问题

问题概述

在 Three.js 中使用 WASD 控制角色移动时，您可能会遇到一个恼人的问题：当同时按下多个方向键时，角色会瞬间旋转到最后一个按下的方向，而不是平滑过渡。这不仅看起来不自然，而且还会破坏游戏的沉浸感。

问题根源

这个问题源于 Three.js 中处理旋转的方式。当您同时按下多个方向键时，rotate 函数会被多次调用，导致用于平滑旋转的插值因子重置为 0。这破坏了平滑过渡效果，导致角色瞬间旋转。

解决方案

为了解决这个问题，我们需要确保插值因子在整个旋转过程中连续递增。我们可以通过将插值因子存储在角色对象中，并在每次 rotate 函数调用时更新它来实现这一点。

更新后的代码如下：

const rotate = (dts, angle) => {
  // 获取角色对象存储的插值因子
  let t = this.t || 0;

  const animateRotation = () => {
    // 更新插值因子
    t += this.rotationSpeed * dts;

    // 如果插值因子达到或超过 1，则将其限制为 1
    if (t >= 1) {
      t = 1;
    }

    const qb = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle);

    // 使用插值因子更新模型的四元数
    this.model.quaternion.slerp(qb, t);

    // 如果插值因子小于 1，则继续动画
    if (t < 1) {
      requestAnimationFrame(animateRotation);
    }
  };

  // 存储插值因子
  this.t = t;

  // 启动动画
  requestAnimationFrame(animateRotation);
};