【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 模式会渲染所有三角面的边线constmaterialnewTHREE.MeshBasicMaterial({color:0x0000ff,wireframe:true// 启用线框模式});2.EdgesGeometry的线条数量EdgesGeometry通过分析几何体的共享边即相邻面之间不共面的边提取出“真正的轮廓线”对于立方体它只会提取12 条边与wireframe相同。但对于复杂几何体如平滑的球体或细分后的模型它会过滤掉共面的边仅保留“硬边”因此线条数量显著减少。// 使用 EdgesGeometry 提取非共面的边constedgesnewTHREE.EdgesGeometry(geometry,15);// 第二个参数是角度阈值单位度constlinenewTHREE.LineSegments(edges,lineMaterial);3. 关键区别特性wireframe: trueEdgesGeometry线条来源所有三角面的边线非共面的边通过角度阈值过滤复杂度控制无法控制完全依赖三角面数量可通过角度阈值 (thresholdAngle) 调整适用场景简单几何体或需要完全线框的情况需要简洁轮廓或复杂几何体性能线条数量多性能较差线条数量少性能更优4. 角度阈值 (thresholdAngle)通过调整EdgesGeometry的第二个参数角度阈值可以控制哪些边被视为“硬边”角度阈值默认是 15 度表示相邻面的法线夹角超过 15 度时边会被保留。增大阈值如30减少线条数量仅保留明显不共面的边。减小阈值如1增加线条数量保留更多细节。// 示例调整角度阈值为 30 度constedgesnewTHREE.EdgesGeometry(geometry,30);5. 直观对比以球体为例wireframe: trueEdgesGeometry6. 完整代码示例// 创建蓝色立方体constgeometrynewTHREE.BoxGeometry(1,1,1);constmaterialnewTHREE.MeshPhongMaterial({color:0x0000ff});constcubenewTHREE.Mesh(geometry,material);scene.add(cube);// 使用 EdgesGeometry 添加黑色轮廓constedgesnewTHREE.EdgesGeometry(geometry,15);// 角度阈值 15 度constlineMaterialnewTHREE.LineBasicMaterial({color:0x000000,linewidth:2});constwireframenewTHREE.LineSegments(edges,lineMaterial);scene.add(wireframe);总结需要简洁轮廓时使用EdgesGeometry通过角度阈值控制线条数量。需要完整线框时使用wireframe: true但需注意性能问题。