如何将Three.js中的正二十面体旋转至指定带数字的面朝向相机？

嘿，这个需求我之前做3D模型交互的时候正好碰到过！要让指定数字的面正对用户（相机），核心就是找到目标面的法向量，然后把模型旋转到让这个法向量指向相机方向。下面一步步给你拆解实现方法：

第一步：给每个面标记对应的数字 #

首先你得让程序知道哪个面对应哪个数字，不管用的是旧的Geometry还是新的BufferGeometry，都可以给面关联数字标识：

用旧版Geometry的情况（你的示例里应该是这个） #

const icosahedronGeo = new THREE.IcosahedronGeometry(1);
// 给每个面绑定数字（正二十面体共20个面，数字从1到20）
icosahedronGeo.faces.forEach((face, index) => {
  face.userData.number = index + 1;
});
const icosahedronMesh = new THREE.Mesh(icosahedronGeo, yourMaterial);
scene.add(icosahedronMesh);

用新版BufferGeometry的情况（推荐，因为Geometry已弃用） #

const icosahedronGeo = new THREE.IcosahedronGeometry(1).toBufferGeometry();
// 记录每个面对应的数字，存在几何体的userData里
const totalFaces = icosahedronGeo.index.count / 3;
icosahedronGeo.userData.faceNumbers = Array.from({ length: totalFaces }, (_, i) => i + 1);
const icosahedronMesh = new THREE.Mesh(icosahedronGeo, yourMaterial);
scene.add(icosahedronMesh);

第二步：编写旋转到目标面的核心函数 #

我们用四元数来计算旋转（避免万向锁问题，比欧拉角更稳定），核心逻辑是：

1. 找到目标面的法向量（转换到世界坐标系）
2. 计算相机指向模型的方向（我们希望面的法向量和这个方向一致，让面正对相机）
3. 生成从当前法线到目标方向的旋转四元数，应用到模型

针对Geometry的实现 #

function rotateToTargetFace(mesh, camera, targetNumber) {
  // 1. 找到目标面
  const targetFace = mesh.geometry.faces.find(face => face.userData.number === targetNumber);
  if (!targetFace) {
    console.warn(`找不到数字为${targetNumber}的面`);
    return;
  }

  // 2. 获取目标面的世界坐标系法线
  const localNormal = targetFace.normal.clone();
  const worldNormal = mesh.localToWorld(localNormal);

  // 3. 计算相机指向模型的方向向量（归一化）
  const cameraToMeshDir = camera.position.clone().sub(mesh.position).normalize();

  // 4. 计算旋转四元数：从当前法线方向转到目标方向
  const targetQuaternion = new THREE.Quaternion();
  targetQuaternion.setFromUnitVectors(worldNormal, cameraToMeshDir);

  // 5. 应用旋转：如果要瞬间跳转就直接赋值，要平滑过渡就用lerp
  // 瞬间跳转
  mesh.quaternion.copy(targetQuaternion);
  // 平滑过渡（每次动画帧补间5%，数值越小越慢）
  // mesh.quaternion.lerp(targetQuaternion, 0.05);
}

针对BufferGeometry的实现 #

function rotateToTargetFaceBuffer(mesh, camera, targetNumber) {
  const geo = mesh.geometry;
  const faceIndex = geo.userData.faceNumbers.indexOf(targetNumber);
  if (faceIndex === -1) {
    console.warn(`找不到数字为${targetNumber}的面`);
    return;
  }

  // 1. 获取目标面的三个顶点法线，计算平均法线
  const normalAttr = geo.attributes.normal;
  const indexAttr = geo.index;
  const i1 = indexAttr.getX(faceIndex * 3);
  const i2 = indexAttr.getX(faceIndex * 3 + 1);
  const i3 = indexAttr.getX(faceIndex * 3 + 2);

  const n1 = new THREE.Vector3().fromBufferAttribute(normalAttr, i1);
  const n2 = new THREE.Vector3().fromBufferAttribute(normalAttr, i2);
  const n3 = new THREE.Vector3().fromBufferAttribute(normalAttr, i3);

  const faceNormal = new THREE.Vector3().addVectors(n1, n2).add(n3).normalize();
  
  // 2. 转换到世界坐标系
  const worldNormal = mesh.localToWorld(faceNormal);

  // 3. 计算相机指向模型的方向
  const cameraToMeshDir = camera.position.clone().sub(mesh.position).normalize();

  // 4. 生成旋转四元数并应用
  const targetQuaternion = new THREE.Quaternion();
  targetQuaternion.setFromUnitVectors(worldNormal, cameraToMeshDir);
  
  // 瞬间跳转或平滑过渡二选一
  mesh.quaternion.copy(targetQuaternion);
  // mesh.quaternion.lerp(targetQuaternion, 0.05);
}

第三步：在动画循环中调用（或按需调用） #

如果要一次性旋转到位，直接在动画循环里调用一次就行；如果要平滑过渡，就放在循环里持续调用：

function animate() {
  requestAnimationFrame(animate);

  // 示例：旋转到显示数字1
  rotateToTargetFace(icosahedronMesh, camera, 1); // 用Geometry的函数
  // rotateToTargetFaceBuffer(icosahedronMesh, camera, 1); // 用BufferGeometry的函数

  renderer.render(scene, camera);
}

一些小贴士 #

• 如果模型有父节点，localToWorld会自动处理父节点的变换，不用担心层级问题
• 平滑过渡时可以调整lerp的第二个参数（0~1），数值越大过渡越快
• 如果相机是动态移动的，可以在每次相机位置变化后重新调用旋转函数，保持目标面正对相机

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