javascript - 使用 THREE.LineBasicMaterial 的线条粗细

Question

我正在使用下面的代码在我的 three.js 场景中创建数百行

edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
    color: 0x6699FF, linewidth: 1, fog:true});
edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
edge[i].type = THREE.Lines;
scene2.add(edge[i]);

它工作得很好，但是当我将“线宽”的值更改为更大或更小的值时，我看不出场景有什么不同。
我应该如何改变线条的粗细？有什么想法吗？
谢谢，季米特里斯

Answer 1

1) 使用原生OpenGL

您可以通过将浏览器设置为使用 native OpenGL 而不是 ANGLE 来实现线条粗细的渲染。 You can read here on how to do this on Chrome .请记住，如果您切换到 native OpenGL，您将体验到性能差异。

编辑:

MrDoob大师本人 posted here how to do this for both Chrome and Firefox .

注意: 第一个选项不再是有效的解决方案，因为最新的 OpenGL 版本也不再支持线宽。检查also @gman his answer .这意味着如果您想使用线条粗细，第二个选项是可行的方法。

---

2) 使用 THREE.MeshLine类

还有另一种解决方案； this THREE.MeshLine class on github是一个很好的解决方法。它带有一个特殊的 THREE.MeshLineMaterial。根据文档，它很简单:

• Create and populate a geometry
• Create a THREE.MeshLine and assign the geometry
• Create a THREE.MeshLineMaterial
• Use THREE.MeshLine and THREE.MeshLineMaterial to create a THREE.Mesh