Three.js中如何实现物体在指定位置原地旋转并正确设置位姿

你当前的实现存在两个核心问题：

• 矩阵相乘顺序错误：Three.js中matrixA.multiply(matrixB)的变换执行顺序是先应用matrixB的变换，再应用matrixA的变换，你现在的写法是先位移再旋转，旋转中心依然是世界坐标系原点，自然达不到绕指定点旋转的效果
• 缺少绕任意点旋转的标准偏移步骤：绕非原点的指定点旋转时，需要先将旋转中心移到原点、执行旋转后再移回原位置，才能保证旋转中心正确

按下面的步骤修改你的代码即可实现「以指定标记点为中心旋转，且最终物体停在标记位置」的效果：

// 你指定的旋转中心/目标位置点
const pivotX = this.valueAOA_X;
const pivotY = this.valueAOA_Y;
const pivotZ = this.valueAOA_Z;

// 步骤1：平移矩阵1：将旋转中心移到世界原点
const translateToOrigin = new THREE.Matrix4().makeTranslation(-pivotX, -pivotY, -pivotZ);
// 步骤2：旋转矩阵：绕Z轴旋转指定角度
const angleRadian = CoordinateConverter.degreeToRadian(this.valueAOA_Rotation);
const rotationAOA = new THREE.Matrix4().makeRotationZ(angleRadian);
// 步骤3：平移矩阵2：将旋转中心移回目标位置
const translateToPivot = new THREE.Matrix4().makeTranslation(pivotX, pivotY, pivotZ);

// 按变换顺序相乘：先移到原点→旋转→移回目标点
const finalMatrix = translateToPivot.multiply(rotationAOA).multiply(translateToOrigin);
this.selectedModel.setPlacementTransform(finalMatrix);

• 如果你的网格本身自带原始偏移（即网格的局部原点不在自身几何中心），可以先调用selectedModel.geometry.center()将几何中心对齐到局部原点，再执行上述变换，效果会更符合预期
• 如果你需要同时叠加其他变换，只需按「后执行的变换先乘」的规则往矩阵链的左侧加即可

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