Three.JS 线框材质 - 所有多边形与仅边缘

Posted 2023-02-27

【中文标题】Three.JS 线框材质 - 所有多边形与仅边缘

【英文标题】：Three.JS wireframe material - all polygons vs. just edges

【发布时间】：2013-12-07 20:31:43

【问题描述】：

我在一个项目中使用 ThreeJS，并注意到旧版本渲染线框的方式与新版本不同，我不知道如何恢复（我更喜欢）。

这个使用版本 54 的小提琴仅渲染使用线框材质绘制的对象的外部边缘：http://jsfiddle.net/ksRyQ/ 或如图所示，以防这是特定于平台的（我在 mac chrome 上）：

另一方面，当我使用较新版本的 r61 在本地运行相同的代码时，我会看到每个多边形的边缘，如下所示：

这两种情况的代码都很简单：

material = new THREE.MeshBasicMaterial(
    color: 0xff0000,
    wireframe: true
);

我确信我可以用线条或其他东西制作立方体，但我宁愿真正理解这个问题。

有什么线索吗？是否有此设置或可以调整的东西？其次，您会注意到现在代码使用的是画布渲染器，虽然我打算使用 webGL 渲染器，但两者都存在相同的现象（尽管存在其他差异）。

【参考方案1】：

如果您想渲染给定geometry 的线框，您现在可以使用此模式：

var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry )

var mat = new THREE.LineBasicMaterial(  color: 0xffffff, linewidth: 2  );

var wireframe = new THREE.LineSegments( geo, mat );

scene.add( wireframe );

WireframeGeometry 将渲染所有边缘。 EdgesGeometry 只会渲染硬边。

另请参阅this related answer，了解如何渲染模型及其线框。

编辑：更新到三个.js.r.82

【讨论】：

为了详细说明，您会看到对角线，因为从 Three.js 中删除了对四面体的支持，因此现在使用三角形来实现 CubeGeometry 和其他人。

知道了，谢谢 Yaku，这肯定回答了我的基本问题——如果我想要别的东西，我只需要画不同的东西。

我在 71 版，没有 EdgesGeometry 或 WireframeGeometry，我可以用什么代替？

这不取决于我，我在 Autodesk Viewer 上，这是他们使用的版本......

如何使用具有变化网格的动画对象来实现这一点？