如何在APS Viewer中高效对模型部件应用旋转等变换？阀盘旋转轴偏移求解

Three.js默认旋转是绕模型本地坐标系原点进行的，要让阀盘绕自定义两点的轴转动，核心是先把旋转中心对齐到目标轴的中点，再执行旋转操作，下面是两种可行的实现方式：

方法一：直接用矩阵组合变换 #

1. 先算出旋转轴的方向向量和中心点

   // pointA、pointB是你指定的两个世界坐标点
   const axis = new THREE.Vector3().subVectors(pointB, pointA).normalize();
   const center = new THREE.Vector3().addVectors(pointA, pointB).multiplyScalar(0.5);
   

2. 构建变换矩阵并应用到阀盘
   思路是先把阀盘平移到原点（让旋转中心和原点重合），绕轴旋转后再平移回原位置：

   // 平移到原点的矩阵
   const toOrigin = new THREE.Matrix4().makeTranslation(-center.x, -center.y, -center.z);
   // 绕目标轴旋转的矩阵（angle是旋转弧度）
   const rotateMat = new THREE.Matrix4().makeRotationAxis(axis, angle);
   // 平移回原位置的矩阵
   const backToCenter = new THREE.Matrix4().makeTranslation(center.x, center.y, center.z);
   // 组合矩阵（顺序不能乱）
   const finalMat = backToCenter.multiply(rotateMat).multiply(toOrigin);
   // 应用到阀盘模型
   valveDisc.applyMatrix4(finalMat);
   

方法二：用父容器做旋转支点 #

这种方式更直观，适合复杂动画的后续调整：

1. 创建一个空的Object3D作为父容器，把它移到旋转轴的中心点

   const pivot = new THREE.Object3D();
   pivot.position.copy(center); // 父容器定位到旋转中心
   scene.add(pivot);
   pivot.add(valveDisc); // 把阀盘挂载到父容器下
   

2. 直接旋转父容器，阀盘会跟着绕目标中心转动

   // 绕目标轴旋转指定角度
   pivot.setRotationFromAxisAngle(axis, angle);
   

注意事项 #

• 确认pointA和pointB是世界坐标系坐标，如果是模型本地坐标，需要用valveDisc.localToWorld(pointA)转换
• 旋转角度要使用弧度，用THREE.MathUtils.degToRad(degrees)可以把角度转成弧度
• 如果模型本身有初始变换，先调用valveDisc.updateMatrixWorld(true)确保坐标计算准确

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