Three.js：两点间拉伸网格的旋转定位问题排查

问题根源 #

手动计算旋转轴和角度的方式容易因向量平行、浮点精度问题出错，而且Three.js提供了更简洁可靠的API处理这类方向对齐需求。另外要确保网格的几何中心在原点，否则旋转后位置会偏移。

修正步骤 #

1. 调整缩放：先计算两点间距离，将网格沿初始方向（你的代码里是Y轴）缩放至对应长度：

const distance = endcoords.distanceTo(startcoords);
// 假设cube3初始Y轴长度为1，若模型本身Y轴长度不是1，需除以初始长度再赋值
cube3.scale.y = distance;

2. 替换旋转逻辑：用Quaternion.setFromUnitVectors直接实现从初始方向到目标方向的旋转，替代手动计算轴和角度：

const currentDirection = new THREE.Vector3(0, 1, 0);
const newDirection = endcoords.clone().sub(startcoords).normalize();

// 创建四元数，将currentDirection旋转到newDirection
const rotationQuat = new THREE.Quaternion();
rotationQuat.setFromUnitVectors(currentDirection, newDirection);

// 应用旋转
cube3.quaternion.copy(rotationQuat);

3. 确认位置：保持你之前的中点计算，确保网格位于两点中间：

cube3.position.copy(startcoords.clone().add(endcoords).multiplyScalar(0.5));

额外注意事项 #

• 检查cube3的几何体是否以原点为中心，如果模型原点不在中心，旋转后会出现偏移，可通过BufferGeometry.center()修正：

cube3.geometry.center();

• 避免混用rotateOnAxis/rotateOnWorldAxis和直接设置quaternion，前者是增量旋转，后者是直接设置绝对旋转，混用会导致旋转混乱。

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