Threejs：为什么线框厚度不适合我？

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
})

我得到以下结果：

无论我用什么号码，线总是1px厚。我注意到threejs api演示页面也是如此：

这是一个已知的错误吗？有什么工作吗？

Answer 1

WebGL1中所需的最大线条粗细为1，因此基本上您的浏览器或操作系统或驱动程序的线条粗细限制为1。

在WebGL2中，限制为1更为常见，因为它在OpenGL 4.0+核心配置文件中为1。

来自OpenGL 4. +规范，第E.2.1节

  

E.2.1不推荐但仍支持的功能

     

以下功能已弃用，但仍存在于核心配置文件中。它们可能会从未来版本的OpenGL中删除，并在实现核心配置文件的前向兼容上下文中删除。

     

  
• 宽行 - 大于1.0的LineWidth值将生成INVALID_VALUE错误。
  

虽然WebGL2基于桌面上的OpenGL ES 3.0，但它运行在OpenGL 4或ANGLE之上，两者的限制均为1.自昨天Firefox 51和Chrome 56发布以来，两者都在台式机上使用ANGLE或OpenGL 4+这意味着即使在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