Three.js：为什么线框的厚度调整无效？

Question

我无法创建粗线框。使用以下代码：

new THREE.MeshBasicMaterial( {
    color: new THREE.Color( 'rgb(100,100,100)' ),
    emissive: new THREE.Color( 'rgb(23,23,23)' ),
    shading: THREE.FlatShading,
    wireframeLinewidth: 10,
    wireframe: true
})

我得到了以下结果：

无论我使用什么数字，线条始终是1像素粗。我注意到在threejs API演示页面上也是如此。

这是一个已知的错误吗？有什么解决方法吗？

- Hello World

---

可能是使用THREE.LineBasicMaterial设置线条粗细的重复问题。 - Paul-Jan

投票关闭，因为这是一个重复的问题，但你可能不知道该搜索什么。提供了一张图片，做得很好。但简而言之：是的，这是在three.js中已知的缺陷，或者说是在基于ANGLE的WebGL实现中的缺陷。解决方法要求使用基于网格的（https://github.com/spite/THREE.MeshLine/blob/master/README.md）或基于着色器的（请参见webgl_materials_wireframe示例）方法。 - Paul-Jan

Answer 1

在WebGL1中，线条的最大要求厚度为1，因此基本上您的浏览器、操作系统或驱动程序对线条粗细有一个1的限制。在WebGL2中，由于OpenGL 4.0+核心配置文件中的限制为1，这种情况更加普遍。来自OpenGL 4.+规范的E.2.1节，宽线-LineWidth值大于1.0将生成INVALID_VALUE错误，这些功能虽然已被弃用，但仍然存在于核心配置文件中。它们可能会在OpenGL的未来版本中被删除，并且在实现核心配置文件的向前兼容上下文中被删除。尽管WebGL2基于桌面上的OpenGL ES 3.0运行，但它运行在OpenGL 4或ANGLE之上，这两者都有一个1的限制。自从Firefox 51和Chrome 56昨天发布以来，两者都在桌面上使用ANGLE或OpenGL 4+，这意味着几乎在任何地方限制现在都是1，即使在WebGL1中也是如此。所有这一切的意义在于，除非您只关心宽度为1的线条，否则不应使用GL的线条绘制线条（是的，我知道，听起来很傻）。

相反，您需要想出其他解决方案。

一些链接，

首先是用于three.js的库。

https://github.com/spite/THREE.MeshLine

否则会有一些关于如何创建线条的文章。

http://labs.hyperandroid.com/efficient-webgl-stroking

https://cesiumjs.org/2013/04/22/Robust-Polyline-Rendering-with-WebGL/

https://mattdesl.svbtle.com/drawing-lines-is-hard

- gman

---

这就是为什么成为一名网页开发人员真的很糟糕的原因。 - Hello World

在本地环境下也没有区别。操作系统升级了某些内容，你就没辙了。 - gman