如何让建筑物绕自身中心轴旋转，且修改旋转参数时位置不被重置？

API 探路者

2026-9-30

问题根因

你每次调用setPlacementTransform时传入的是全新的THREE.Matrix4实例，该方法是全量覆盖模型的变换矩阵，旧的位移/旋转属性会被直接清空，所以修改旋转后之前设置的位置就会恢复到初始状态。
建筑物可以实现基于自身中心轴旋转，只需要调整矩阵组合顺序，增加锚点偏移处理即可。

修复代码

场景1：模型默认锚点已经在自身中心

直接按正确顺序组合旋转、位移矩阵后一次性设置即可：

// 生成旋转矩阵
const rotationMat = new THREE.Matrix4().makeRotationZ(angleRadian);
// 生成位移矩阵
const positionMat = new THREE.Matrix4().setPosition({
  x: this.valueX,
  y: this.valueY,
  z: this.valueZ,
});
// 矩阵右乘：先应用旋转，再应用位移
const finalTransformMat = positionMat.multiply(rotationMat);
// 一次性设置全量变换
this.viewer.model.setPlacementTransform(finalTransformMat);

场景2：模型默认锚点不在自身中心

需要先计算模型的中心偏移量，调整变换顺序实现绕自身中心旋转：

// 模型加载完成后仅计算一次中心偏移，无需每次修改变换都重复计算
if (!this.modelCenterOffset) {
  const modelBox = new THREE.Box3().setFromObject(this.viewer.model);
  this.modelCenterOffset = modelBox.getCenter(new THREE.Vector3()).negate();
}

// 偏移矩阵：将模型锚点移动到自身几何中心
const offsetMat = new THREE.Matrix4().setPosition(this.modelCenterOffset);
// 旋转矩阵
const rotationMat = new THREE.Matrix4().makeRotationZ(angleRadian);
// 位移矩阵
const positionMat = new THREE.Matrix4().setPosition({
  x: this.valueX,
  y: this.valueY,
  z: this.valueZ,
});

// 变换顺序：先偏移到中心 → 执行旋转 → 位移到目标坐标
const finalTransformMat = positionMat.multiply(rotationMat).multiply(offsetMat);
this.viewer.model.setPlacementTransform(finalTransformMat);