Three.js正方体为何不显示对角线？

Question

在使用 Three.js 创建正方体时，开发者常发现立方体的对角线并未显示。这是因为 Three.js 的 `BoxGeometry` 默认仅生成六个面的三角形网格，每个面由两个三角形组成，仅包含边线而非对角线。WebGL 渲染基于三角形图元，虽然视觉上需要封闭表面，但并不自动绘制面内的对角线。若需显示对角线，必须手动添加线条（使用 `Line` 或 `LineSegments`）来表示顶点间的对角连接。因此，“正方体不显示对角线”并非 Bug，而是几何建模与渲染机制的正常表现。

Answer 1

一、问题现象：Three.js 正方体为何不显示对角线？

在使用 BoxGeometry 创建正方体时，许多开发者发现立方体的每个面上缺少对角线。这种视觉缺失常被误认为是渲染 Bug 或几何构造错误。实际上，这是 Three.js 几何建模机制与 WebGL 渲染原理共同作用的结果。

默认情况下，BoxGeometry 为每个面生成两个三角形（共12个三角形），以确保表面封闭且可正确进行光照和着色计算。然而，这些三角形仅定义了面的边界和填充，并不会将对角线作为可见线条渲染出来。

二、底层机制解析

• 三角形图元基础：WebGL 所有几何体最终都必须分解为三角形图元进行绘制。Three.js 的 BoxGeometry 遵循此原则，将每个矩形面划分为两个三角形。
• 顶点连接方式：每个面的四个顶点通过边连接形成两个共享斜边的三角形，该“斜边”即为实际存在的对角线，但它只是几何结构的一部分，而非视觉线条。
• 渲染管线行为：除非显式指定绘制线条模式（如 LineBasicMaterial），否则 WebGL 只渲染填充的三角面，忽略内部连接线。

三、常见误解与澄清

误解	事实
对角线应该自动显示	对角线是三角剖分的副产品，非视觉元素
BoxGeometry 缺少顶点数据	所有8个顶点完整存在，连接关系正确
需要修改材质才能看到对角线	材质控制外观，但不能暴露隐式几何线

四、实现对角线显示的技术路径

若需可视化对角线，必须手动添加线条对象。以下是使用 LineSegments 绘制所有面内对角线的示例代码：

const geometry = new THREE.BoxGeometry(2, 2, 2);
const edges = new THREE.EdgesGeometry(geometry);
const lines = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xff0000 }));
scene.add(lines);
    

此外，也可自定义顶点对组合，精确控制哪些对角线被绘制。

五、扩展方案与高级应用

对于更复杂的线框需求（如仅显示主对角线或空间对角线），可结合 BufferGeometry 手动构建顶点索引。例如，立方体的空间对角线连接相对顶点（共4条），可通过以下顶点索引定义：

• 顶点0 → 顶点7
• 顶点1 → 顶点6
• 顶点2 → 顶点5
• 顶点3 → 顶点4

六、流程图：从几何生成到对角线可视化

graph TD
            A[创建 BoxGeometry] --> B[生成6个面，每面2个三角形]
            B --> C[顶点间存在对角连接（结构上）]
            C --> D[WebGL 渲染三角面填充]
            D --> E[用户未见对角线]
            E --> F{是否需要显示对角线？}
            F -- 是 --> G[使用 EdgesGeometry 或 LineSegments]
            F -- 否 --> H[保持默认渲染]
            G --> I[添加线条对象至场景]
            I --> J[渲染出可见对角线]

七、性能与实践建议

在大规模场景中频繁使用 LineSegments 可能增加 GPU 负担。建议：

1. 复用 EdgesGeometry 实例以减少内存开销；
2. 使用 InstancedMesh 批量渲染多个带对角线的立方体；
3. 在调试模式下启用对角线，发布时关闭以优化性能；
4. 考虑使用着色器（Shader）在片段级别模拟对角线效果；
5. 利用 WireframeHelper 快速预览结构；
6. 对动态变形几何体，定期更新 EdgesGeometry 缓存；
7. 避免在 PBR 材质下叠加过多线条以免破坏真实感；
8. 测试不同抗锯齿设置对细线渲染的影响；
9. 结合 CSS2DRenderer 标注关键对角线；
10. 记录自定义线条生成逻辑以便团队复用。