Three.js中如何为InstancedMesh子实例设置枢轴实现绕自身中心旋转？

完全可以通过枢轴变换解决这个问题，以下是两种实用方案：

方案一：调整几何体本地枢轴（修改顶点数据） #

直接修改车轮几何体的顶点，将其原点移到自身中心，这样实例化后绕原点旋转就是绕自身中心旋转：

1. 计算几何体的包围盒中心
2. 将所有顶点平移，使中心成为几何体的本地原点

// 处理车轮几何体
const wheelGeometry = yourWheelMesh.geometry;
wheelGeometry.computeBoundingBox();
const center = wheelGeometry.boundingBox.getCenter(new THREE.Vector3());
// 平移顶点，将中心设为原点
wheelGeometry.translate(-center.x, -center.y, -center.z);

之后创建InstancedMesh时，只需通过实例矩阵设置位置和旋转即可，旋转会自动围绕车轮自身中心进行。

方案二：在实例矩阵中组合变换（不修改原始几何体） #

如果不想改动原始几何体，可以通过矩阵组合实现枢轴旋转：
核心思路是先将模型的本地原点临时移到自身中心，旋转后再移到目标场景位置，变换顺序为：平移到目标位置 → 旋转 → 平移回自身中心的反向

// 假设wheelLocalCenter是车轮在本地模型中的中心坐标
const wheelLocalCenter = new THREE.Vector3(0.5, 0, 0); // 示例值，需根据实际模型调整
const targetPos = new THREE.Vector3(2, 0.3, 0); // 车轮要放置的场景位置
const rotationY = Math.PI / 2; // 旋转角度

const instanceMatrix = new THREE.Matrix4();
// 组合变换矩阵
instanceMatrix
  .makeTranslation(targetPos.x, targetPos.y, targetPos.z)
  .multiply(new THREE.Matrix4().makeRotationY(rotationY))
  .multiply(new THREE.Matrix4().makeTranslation(-wheelLocalCenter.x, -wheelLocalCenter.y, -wheelLocalCenter.z));

// 应用到实例
instancedMesh.setMatrixAt(instanceIndex, instanceMatrix);
instancedMesh.instanceMatrix.needsUpdate = true;

方案对比 #

• 方案一：一次修改几何体，所有实例通用，性能更优，适合批量相同模型的场景
• 方案二：保留原始几何体，灵活性更高，适合每个实例枢轴不同或需复用原始模型的场景

内容的提问来源于stack exchange，提问作者Anoman.M