【Three】EdgesGeometry 和 wireframe 详细对比及使用说明

在 Three.js 中，EdgesGeometry生成的线条数量通常比直接在材质上启用wireframe: true更少，原因在于两者的实现机制不同。以下是详细解释和对比：

摘要：本文从底层机制出发，对比了 Three.js 中两种常见线框方案——材质wireframe: true与EdgesGeometry——在渲染线条数量、灵活性及性能上的差异，并结合角度阈值 (thresholdAngle) 给出直观对比与完整代码示例。

1.wireframe: true的线条数量

当在材质中启用wireframe时，Three.js 会渲染几何体的所有三角面边线。例如：

• 立方体（BoxGeometry）默认由 6 个面组成，每个面由 2 个三角形拼接而成，因此会有12 个三角形。
• 每个三角形有 3 条边线，但相邻三角形共享边线，所以实际渲染的边线数量为12 条边（与EdgesGeometry相同）。
• 但对于更复杂的几何体（如细分后的球体或圆柱体），wireframe会渲染所有三角面的边线，导致线条数量爆炸式增长。

// wireframe 模式会渲染所有三角面的边线constmaterial=newTHREE.MeshBasicMaterial({color:0x0000ff,wireframe:true// 启用线框模式});

2.EdgesGeometry的线条数量

EdgesGeometry通过分析几何体的共享边（即相邻面之间不共面的边），提取出“真正的轮廓线”：

• 对于立方体，它只会提取12 条边（与wireframe相同）。
• 但对于复杂几何体（如平滑的球体或细分后的模型），它会过滤掉共面的边，仅保留“硬边”，因此线条数量显著减少。

// 使用 EdgesGeometry 提取非共面的边constedges=newTHREE.EdgesGeometry(geometry,15);// 第二个参数是角度阈值（单位：度）constline=newTHREE.LineSegments(edges,lineMaterial);

3. 关键区别

4. 角度阈值 (thresholdAngle)

通过调整EdgesGeometry的第二个参数（角度阈值），可以控制哪些边被视为“硬边”：

• 角度阈值默认是 15 度，表示相邻面的法线夹角超过 15 度时，边会被保留。
• 增大阈值（如30）：减少线条数量（仅保留明显不共面的边）。
• 减小阈值（如1）：增加线条数量（保留更多细节）。

// 示例：调整角度阈值为 30 度constedges=newTHREE.EdgesGeometry(geometry,30);

5. 直观对比（以球体为例）

• wireframe: true：
  

• EdgesGeometry：
  

6. 完整代码示例

// 创建蓝色立方体constgeometry=newTHREE.BoxGeometry(1,1,1);constmaterial=newTHREE.MeshPhongMaterial({color:0x0000ff});constcube=newTHREE.Mesh(geometry,material);scene.add(cube);// 使用 EdgesGeometry 添加黑色轮廓constedges=newTHREE.EdgesGeometry(geometry,15);// 角度阈值 15 度constlineMaterial=newTHREE.LineBasicMaterial({color:0x000000,linewidth:2});constwireframe=newTHREE.LineSegments(edges,lineMaterial);scene.add(wireframe);

总结

• 需要简洁轮廓时：使用EdgesGeometry，通过角度阈值控制线条数量。
• 需要完整线框时：使用wireframe: true，但需注意性能问题。