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

I'm using ThreeJS in a project and noticed that older versions render wireframes differently than newer versions, and I can't figure out how to revert (which I'd prefer).

我在一个项目中使用ThreeJS并注意到旧版本渲染线框与新版本不同,我无法弄清楚如何恢复(我更喜欢)。

This fiddle using release 54 renders only the exterior edges of the object drawn with a wireframe material: http://jsfiddle.net/ksRyQ/ or as pictured here in case this is platform specific (I'm on mac chrome):

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

On the other hand, when I run the same code locally using the newer version r61 I see each polygon's edge, as in:

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

the code in both cases is simple:

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

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

I'm sure I could make the cube out of lines or something, but I'd rather actually understand the issue.

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

Any clues? Is there a setting for this or something that can be tweaked? Secondarily, you'll note that right now that code is using the canvas renderer, although I plan to use the webGL renderer, but the same phenomenon is true with both (even though there are other differences).

有什么线索吗?有没有可以调整的设置?其次,你会注意到现在代码正在使用画布渲染器,虽然我打算使用webGL渲染器,但两者都是相同的现象(尽管还有其他差异)。

1 个解决方案

#1

If you want to render a wireframe of a given geometry, you can now use this pattern:

如果要渲染给定几何体的线框,现在可以使用此模式:

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 will render all edges. EdgesGeometry will render the hard edges only.

WireframeGeometry将渲染所有边。 EdgesGeometry仅渲染硬边。

Also see this related answer on how to render both a model and its wireframe.

另请参阅有关如何渲染模型及其线框的相关答案。

EDIT: updated to three.js.r.82

编辑:更新为three.js.r.82