tween.js旋转异常：每次旋转重置为初始角度而非累加旋转

问题出在你创建tween时固定了起始值，且在onUpdate中错误累加旋转值，导致tween的起始状态和模型实际旋转脱节。以下是修正方案：

方案一：每次触发旋转时创建新tween #

当模型到达指定y轴位置时，执行这个函数：

function rotateModel90Deg() {
  // 以模型当前的z轴旋转值作为tween起始点
  const startRotation = model.rotation.z;
  // 目标值为当前角度加90度（转弧度）
  const targetRotation = startRotation + MathUtils.degToRad(90);

  new TWEEN.Tween({ z: startRotation })
    .to({ z: targetRotation }, 2000)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate((rotationObj) => {
      model.rotation.z = rotationObj.z;
    })
    .start();
}

方案二：复用tween对象（适合频繁触发场景） #

先初始化一次tween，每次触发时更新起始和目标值：

// 初始化通用旋转tween，不固定起始/目标
let tweenRotation = new TWEEN.Tween({})
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate((rotationObj) => {
    model.rotation.z = rotationObj.z;
  });

// 到达指定y位置时调用此函数
function triggerRotation() {
  const currentZ = model.rotation.z;
  const targetZ = currentZ + MathUtils.degToRad(90);

  tweenRotation.stop(); // 停止可能正在运行的tween
  tweenRotation._object.z = currentZ; // 更新起始值
  tweenRotation.to({ z: targetZ }, 2000); // 更新目标值
  tweenRotation.start();
}

关键修正点 #

• 移除onUpdate和onComplete中对currentRotation的累加操作：tween每帧都会调用onUpdate，重复累加会让旋转值彻底混乱。
• 每次触发旋转时，必须以模型当前的实际旋转值作为tween的起始点，而不是用一个提前定义的变量（变量无法自动同步模型实时旋转）。
• 如果是链式循环动画的一部分，确保在模型到达指定y位置的回调逻辑中调用上述旋转触发函数。

内容的提问来源于stack exchange，提问作者rju7n