Three.js飞行动画问题：飞机沿曲线路径移动时异常旋转

嘿，我来帮你搞定这个飞机旋转乱跳的问题！这种情况在Three.js做路径动画时太常见了，大多是因为飞机的朝向没跟上路径的运动方向，咱们一步步来排查解决：

核心问题：飞机朝向未跟随路径切线 #

默认创建的PlaneMesh初始朝向是固定的（默认面朝Z轴），如果只单纯更新位置不调整旋转，飞机自然会和路径方向脱节，出现奇怪的旋转。咱们得让飞机的前进方向始终对齐路径的切线方向。

具体解决方案 #

1. 用平滑曲线计算连续切线 #

如果你的路径是离散顶点组成的直线段，切线方向会在顶点处突变，直接导致旋转跳变。先把顶点转换成平滑曲线：

// 假设你原来的lineVertices是顶点数组
const smoothCurve = new THREE.CatmullRomCurve3(lineVertices, false, 'centripetal');

这样曲线的切线会更连续，旋转过渡也会自然很多。

2. 每一帧同步更新位置与旋转 #

在动画循环里，除了设置飞机的位置，还要根据当前路径点的切线调整旋转。这里给你两种常用方式：

方式一：用lookAt方法（简单直观）

function updatePlanePosition(plane, curve, t) {
  // t是当前动画进度，取值0到1之间
  const currentPos = curve.getPointAt(t);
  const tangent = curve.getTangentAt(t).normalize();
  // 让飞机看向当前位置+切线方向（也就是前进方向）
  plane.lookAt(currentPos.clone().add(tangent));
  // 更新飞机位置
  plane.position.copy(currentPos);
}

如果你的飞机初始朝向和预期不符，可以提前调整初始旋转，比如：

const plane = createPlane('your-plane-image.png');
// 比如让飞机初始面朝X轴，根据你的场景需求调整
plane.rotation.y = Math.PI / 2;

方式二：构建旋转矩阵（精准控制上下方向）

如果用lookAt出现飞机翻滚的情况，可以手动构建旋转矩阵，固定向上向量：

function updatePlanePosition(plane, curve, t) {
  const currentPos = curve.getPointAt(t);
  const tangent = curve.getTangentAt(t).normalize();
  const up = new THREE.Vector3(0, 1, 0); // 定义向上为Y轴，可根据场景修改
  const binormal = new THREE.Vector3().crossVectors(up, tangent).normalize();
  const normal = new THREE.Vector3().crossVectors(tangent, binormal).normalize();

  // 更新位置
  plane.position.copy(currentPos);

  // 构建旋转矩阵，确保飞机朝向切线，且保持正确的上下方向
  const rotMatrix = new THREE.Matrix4().lookAt(
    currentPos,
    currentPos.clone().add(tangent),
    normal
  );
  plane.quaternion.setFromRotationMatrix(rotMatrix);
}

3. 检查PlaneGeometry的初始朝向 #

默认的PlaneGeometry(5,5)是在XY平面上，面朝Z轴。如果你的路径运动方向是X轴或Y轴，初始朝向不对也会导致旋转异常。可以在创建飞机时直接调整：

function createPlane(image) {
  const plane = new THREE.Mesh(
    new THREE.PlaneGeometry(5, 5),
    new THREE.MeshPhongMaterial({
      map: new THREE.TextureLoader().load('textures/planes/' + image),
      side: THREE.DoubleSide,
      transparent: true
    })
  );
  // 调整初始旋转，比如让飞机面朝X轴
  plane.rotation.y = Math.PI / 2;
  return plane;
}

总结 #

只要让飞机的朝向始终跟随路径的切线方向，同时确保曲线平滑、初始朝向匹配你的运动需求，就能解决异常旋转的问题啦！

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