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

Question

我正在尝试使变换控件Gizmo线更厚，因为线宽为1很难掌握它们。但是，通过更改this.linewidth = 1没有任何反应。根据{{​​3}}，linewidth参数在Windows中不起作用。任何帮助？

Answer 1

关于线条粗细：

除非您的浏览器允许您 - 并且您选择加入 - 使用原生OpenGL进行绘制，否则Windows中的浏览器将使用名为ANGLE的应用程序层。因为Direct3D不支持行宽，所以ANGLE也不支持，因此three.js也不支持（在非本机GL模式下，Windows也是如此）。 Here's a discussion on the root topic，遗憾的是，已接受的解决方案是使用几何着色器，WebGL不支持。

<强>解决方案：

你已经发现了一个：使用气瓶。

有一些聪明的方法可以从你的线条定义创建四边形并使用着色器来操纵它们看起来像是线条，但讨论这种方法目前还不够深入。

最后，您可以将您的three.js版本升级到r91 +。 "Fat" line support was added in r91，您可以找到示例here。

Answer 2

你的答案是一个很好的解决方法，但原因是因为WebGL并不真正支持不同的线宽。来自MDN网站文档：

  

基于OpenGL ES 2.0 / 3.0规范的webgl规范指出，行的最小和最大宽度是实现定义的。最大最小宽度允许为1.0。最小最大宽度也允许为1.0。由于这些实现定义的限制，建议不要使用1.0以外的行宽，因为不保证任何用户的浏览器都会显示任何其他宽度。

     

截至2017年1月，大多数WebGL实现仅支持最少1个，最多1个，因为它们所基于的技术具有相同的限制。

Source

这就是为什么你没有看到差异，为什么要创造＆＃34;胖＆＃34; WebGL中的线条需要创建实际更厚的几何体。

Answer 3

过了一段时间，将Line更改为Cylinders并不是那么困难。所以

以下是更新的TransformControls.js

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