Three.js变换控制过细的线条

Question

我试图使转换控件gizmo线变得更厚，因为很难用1的线宽来掌握它们。然而，通过改变this.linewidth = 1不会发生任何事情。根据https://threejs.org/docs/#api/materials/LineBasicMaterial的说法，线宽参数在Windows中不起作用。有什么帮助吗？

Answer 1

关于线宽的：

除非您的浏览器允许您--并且您选择--使用本机OpenGL，否则Windows中的浏览器将使用名为夹角的应用层。因为Direct3D不支持线宽，角度也不支持，three.js也不支持(同样，在非本地GL模式下)。这里有一个关于根主题的讨论，不幸的是，公认的解决方案是使用几何着色器，这是不受WebGL支持的。

解决方案：

你已经发现了一个:使用圆柱体。

有一些聪明的方法可以从你的线条定义中创建四面体，并使用着色器来操纵它们，使它们看起来像是线条，但是讨论这种方法目前已经超出了我的深度。

最后，您可以将您的three.js升级到r91+。在r91中添加了"Fat“行支持，您可以找到一个示例这里。

Answer 2

过了一段时间，把这些线变成钢瓶并不是那么困难。所以

​

​

下面是更新的TransformControls.js

https://www.dropbox.com/s/y52ra0antdvo0ht/TransformControls.js?dl=0

Answer 3

您的答案是一个很好的工作，但原因是因为WebGL并不真正支持不同的线宽。来自MDN网络文档：

webgl规范基于OpenGL es2.0/3.0规范，指出一行的最小和最大宽度是实现定义的。允许最大最小宽度为1.0。最小宽度也允许为1.0。由于这些实现定义的限制，不建议使用1.0以外的行宽，因为不能保证任何用户的浏览器都会显示任何其他宽度。 截至2017年1月，大多数WebGL实现只支持至少1和最多1，因为它们所基于的技术具有相同的限制。

来源

这就是为什么您看不到差异的原因，以及为什么在WebGL中创建"fat“行需要创建实际更厚的几何图形。