THREEJS中任意朝向2D平面的尺寸计算方法咨询

核心原理 #

直接取3D空间内平面的轴对齐包围盒(AABB)计算宽高无效，是因为AABB的尺寸会随平面朝向变化，和平面本身的实际物理尺寸无关。你提到的将平面法线对齐坐标轴的思路是可行的，我们可以通过局部坐标系投影的方式更高效实现，不需要显式旋转整个平面。

实现步骤 #

• 先获取平面的必要基础数据：平面4个顶点的世界坐标、平面的单位法线向量normal、平面中心点坐标origin（可以用四个顶点坐标求平均得到）。
• 构建平面局部正交坐标系：
  1. 选一个不与normal共线的临时参考向量：如果normal的y分量绝对值小于0.999，取临时向量为(0, 1, 0)，否则取(1, 0, 0)，避免叉乘得到零向量。
  2. 计算局部X轴：tangentX = normalize(cross(临时向量, normal))
  3. 计算局部Z轴：tangentZ = normalize(cross(normal, tangentX))
     最终三个轴tangentX、normal、tangentZ互相正交，构成平面的局部坐标系，平面上所有点在这个坐标系下的Y分量都为0。
• 将所有顶点投影到局部坐标系：
  对每个顶点v，先计算相对于中心点的偏移量delta = v - origin，再通过点积计算投影坐标：

  localX = dot(delta, tangentX)
  localZ = dot(delta, tangentZ)
  

• 计算最终宽高：
  遍历所有顶点的localX和localZ，得到最大值maxX/maxZ和最小值minX/minZ：
  • 平面宽度 = maxX - minX
  • 平面高度 = maxZ - minZ

注意事项 #

该方法避免了显式构造旋转矩阵、对所有顶点做旋转变换的开销，计算量更小，同时也降低了浮点运算的累积误差。
如果你能直接拿到平面的生成参数（比如创建时传入的宽高、旋转参数），优先直接读取参数，不需要做投影计算。

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