如何在Three.js中正确旋转共面多边形顶点至XZ平面以检测自交

当前代码的问题 #

你当前的旋转逻辑存在两个核心错误：

1. 矩阵覆盖问题：Matrix4.makeRotationAxis()会直接重置整个矩阵，第二次调用会完全覆盖第一次的绕X轴旋转，最终只保留绕Z轴的旋转。
2. 角度计算错误：用多边形的位置向量pos与Y轴计算角度完全不合理，旋转的依据应该是多边形所在平面的法向量，而不是位置坐标。

正确实现步骤 #

要将任意平面的多边形对齐到XZ平面，核心是把多边形所在平面的法向量旋转到与XZ平面的法向量（即Y轴(0,1,0)）重合，同时保持多边形的形状不变。

1. 计算多边形平面的法向量

如果没有提前获取法向量，可通过多边形的三个顶点叉乘得到：

// 假设polygonVertices是你的多边形顶点数组，元素均为THREE.Vector3
const v1 = polygonVertices[0];
const v2 = polygonVertices[1];
const v3 = polygonVertices[2];

// 计算两条边向量
const edge1 = new THREE.Vector3().subVectors(v2, v1);
const edge2 = new THREE.Vector3().subVectors(v3, v1);

// 叉乘得到法向量并归一化
const planeNormal = new THREE.Vector3().crossVectors(edge1, edge2).normalize();

2. 构建旋转矩阵/四元数

使用四元数计算从当前法向量到Y轴的旋转，比手动计算角度+轴更可靠，还能避免万向锁问题：

// XZ平面的目标法向量是Y轴
const targetNormal = new THREE.Vector3(0, 1, 0);

// 生成从当前法向量到目标法向量的旋转四元数
const rotationQuat = new THREE.Quaternion().setFromUnitVectors(planeNormal, targetNormal);

// 将四元数转换为矩阵（如果需要对Object3D应用）
const rotationMatrix = new THREE.Matrix4().makeRotationFromQuaternion(rotationQuat);

3. 应用旋转并保持形状

如果多边形中心不在原点，直接旋转会导致形状偏移，建议先平移到原点，旋转后再平移回原位置：

// 计算多边形的中心
const center = new THREE.Vector3();
polygonVertices.forEach(vertex => center.add(vertex));
center.divideScalar(polygonVertices.length);

// 步骤1：将所有顶点平移到原点
polygonVertices.forEach(vertex => vertex.sub(center));
// 步骤2：应用旋转
polygonVertices.forEach(vertex => vertex.applyQuaternion(rotationQuat));
// 步骤3：平移回原中心
polygonVertices.forEach(vertex => vertex.add(center));

// 如果是操作Three.js的Object3D（比如你的circle对象），直接应用矩阵即可
circle.applyMatrix4(rotationMatrix);

效果对比 #

旋转前：

错误旋转后效果：

（正确实现后，多边形会完全贴合XZ平面，顶点Y坐标一致）

关键注意事项 #

• 确保多边形是严格共面的，否则法向量计算会出现误差，导致旋转不准。
• 如果已经有平面的法向量（比如通过THREE.Plane对象获取），直接使用即可，无需重新计算。
• 优先使用四元数处理旋转，比手动构建旋转矩阵更简洁且不易出错。

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