Three.js 开发中如何计算两个平面几何体之间的夹角

核心原理 #

两个平面的夹角本质等于它们法向量的夹角（或对应补角，一般取0~π/2范围内的最小夹角作为最终结果），所以只需要先提取两个平面几何体的法向量，再计算向量夹角即可得到目标值α。

具体实现步骤 #

• 第一步：提取平面世界坐标系下的法向量
  Three.js内置的PlaneGeometry默认法向量沿局部坐标系z轴正方向，需要先转换为世界坐标系下的单位法向量：

  // 封装获取平面网格世界法向量的工具函数
  function getPlaneWorldNormal(planeMesh) {
    // 平面默认局部法向量
    const localNormal = new THREE.Vector3(0, 0, 1);
    // 应用世界矩阵得到世界坐标系下的法向量
    localNormal.applyMatrix4(planeMesh.matrixWorld);
    // 归一化处理
    localNormal.normalize();
    return localNormal;
  }
  

• 第二步：计算法向量夹角
  直接调用Three.js向量内置的angleTo方法即可得到弧度制夹角：

  // 先更新两个平面的世界矩阵，确保变换参数生效
  planeMesh1.updateMatrixWorld(true);
  planeMesh2.updateMatrixWorld(true);
  const normal1 = getPlaneWorldNormal(planeMesh1);
  const normal2 = getPlaneWorldNormal(planeMesh2);
  let alpha = normal1.angleTo(normal2);
  

• 第三步：标准化夹角取值范围
  为了符合通用的平面夹角定义（取两个平面形成的最小夹角），对计算结果做范围校准：

  // 取最小夹角，范围固定在0~π/2
  alpha = Math.min(alpha, Math.PI - alpha);
  // 如需转换为角度单位，做如下换算
  const alphaDegree = alpha * 180 / Math.PI;
  

如果你的平面几何体有自定义的顶点修改，不是默认的平面朝向，需要先从几何体属性中读取对应法向量，再做世界坐标系转换即可。

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