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

tek*_*ato 38 javascript three.js

我使用ThreeJS在一个项目中,发现旧版本的渲染线框不同于新版本,我无法弄清楚如何恢复(我宁愿).

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

在此输入图像描述

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

在此输入图像描述

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

material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
});
Run Code Online (Sandbox Code Playgroud)

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

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

Wes*_*ley 66

如果要渲染给定的线框,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 );
Run Code Online (Sandbox Code Playgroud)

WireframeGeometry将渲染所有边缘.EdgesGeometry将仅渲染硬边.

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

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

  • 只是详细说明,你会看到对角线,因为从Three.js中删除了对四边形面的支持,因此现在使用三角形实现了CubeGeometry和其他. (8认同)
  • 如何使用具有变化网格的动画对象来实现此功能? (2认同)