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

Question

我正在一个项目中使用ThreeJS，发现旧版本与新版本渲染线框的方式不同，但我无法找到如何还原（我更喜欢旧版本的方式）。这个fiddle使用的是54版本，只渲染了外部边缘，使用的是wireframe材质：http://jsfiddle.net/ksRyQ/，或者在这里查看图片以防这是平台特定的（我在mac chrome上）：

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

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

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

我相信我可以用线条或其他方法制作立方体，但我更愿意真正理解这个问题。

有什么线索吗？是否有可以调整的设置？其次，您会注意到目前该代码正在使用Canvas渲染器，尽管我计划使用WebGL渲染器，但两者都存在相同的现象（即使存在其他差异）。

- jack_was_taken

Answer 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只会渲染硬边。

另请参见此相关答案，了解如何同时渲染模型和其线框。

编辑：已更新为three.js.r.82

- WestLangley

---

只是为了解释，您看到对角线是因为Three.js不再支持四边形面，所以现在CubeGeometry和其他几何体都使用三角形来实现。 - yaku

明白了，谢谢Yaku，这确实回答了我的基本问题——如果我想要其他的东西，我只需要用不同的方式绘制它。 - jack_was_taken

我现在使用的是版本71，但没有EdgesGeometry或WireframeGeometry，有什么替代品可以使用吗？ - shinzou

不是我决定的，我在使用 Autodesk Viewer，那就是它所使用的版本... - shinzou

如何使动画对象与具有不断变化网格的对象配合工作？ - f1lt3r