三.JS 线框材料 - 所有多边形与仅边缘

IT技术 javascript three.js
2021-03-10 15:38:07

我在一个项目中使用 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只会渲染硬边。

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

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

明白了，谢谢 Yaku，这绝对回答了我的基本问题——如果我想要别的东西，我只需要以不同的方式绘制它。
2021-04-21 15:38:07
这不取决于我，我在 Autodesk 查看器上，这就是他们使用的版本......
2021-04-23 15:38:07
我在 rev 71 并且没有 EdgesGeometry 或 WireframeGeometry，我可以用什么代替？
2021-05-05 15:38:07
您如何使用具有不断变化的网格的动画对象进行此操作？
2021-05-17 15:38:07
详细说明一下，您会看到对角线，因为 Three.js 不再支持四边形，因此 CubeGeometry 和其他工具现在使用三角形来实现。
2021-05-19 15:38:07
其它你可能感兴趣的问题
上一篇通过调用prototype.constructor.apply 实例化一个JavaScript 对象 下一篇如何同时绑定 Mousedown 和 Touchstart，但不响应两者？安卓、jQuery