使用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]);

它工作得很好,但是当我将"linewidth"的值更改为更大或更小的值时,我看到场景中没有区别.
我该如何改变线条的粗细？有任何想法吗？
谢谢,迪米特里斯

Answer 1

1)使用原生OpenGL

通过将浏览器设置为使用本机OpenGL而不是ANGLE,可以通过解决方法实现线条粗细的渲染.您可以在此处阅读有关如何在Chrome上执行此操作的信息.请记住,如果您交换到本机OpenGL,您将遇到性能差异.

编辑:

主人MrDoob亲自在这里发布了如何为Chrome和Firefox做到这一点.

注意: 第一个选项不再是有效的解决方案,因为最新的OpenGL版本也不再支持线宽.检查@gman他的回答.这意味着如果你想使用线条粗细,第二种选择是要走的路.

2)使用THREE.MeshLine课程

还有另一种解决方案; github上的这个THREE.MeshLine类是一个很好的解决方法.它配有一个特殊的THREE.MeshLineMaterial.根据文档,它很简单:

• 创建并填充几何体
• 创建THREE.MeshLine并指定几何体
• 创建一个 THREE.MeshLineMaterial
• 使用THREE.MeshLine和THREE.MeshLineMaterial创建一个THREE.Mesh

Answer 2

你在使用Windows吗？
我记得这不适用于Windows,因为它没有在ANGLE中实现.

Answer 3

这种情况发生在Windows Chrome和Firefox中,都使用ANGLE(WebGL到DirectX包装器).

ANGLE项目仍然没有解决这个问题.您可以在此处加注问题,以获得更高的优先级,并获得通知,如果它将被实施:

https://code.google.com/p/angleproject/issues/detail?id=119

Answer 4

这不再只是 ANGLE 中的问题，而是所有平台上的问题。浏览器需要切换到 OpenGL 4+ 核心配置文件才能支持 WebGL2，并且 OpenGL 4+ 核心配置文件不支持大于 1 的线宽。来自 OpenGL 4.0+ 规范，E.2.1 节

E.2.1 已弃用但仍受支持的功能

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

• 宽线 - 线宽值大于 1.0 将生成 INVALID_VALUE 错误。

要绘制较粗的线条，您需要生成几何图形。对于 Three.js 有这个库（Wilt 也指出了）

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

Answer 5

我使用 TubeGeometry 在两点之间创建一条粗线：

参见 Helix 中的绿线

// line material
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });


let startVector = new THREE.Vector3(
    RADI * Math.cos(t),
    RADI * Math.sin(t),
    3 * t
  );
  let endVector = new THREE.Vector3(
    RADI * Math.cos(t + 10),
    RADI * Math.sin(t + 10),
    3 * t
  );

  let linePoints = [];
  linePoints.push(startVector, endVector);

  // Create Tube Geometry
  var tubeGeometry = new THREE.TubeGeometry(
    new THREE.CatmullRomCurve3(linePoints),
    512,// path segments
    0.5,// THICKNESS
    8, //Roundness of Tube
    false //closed
  );

  let line = new THREE.Line(tubeGeometry, lineMaterial);
  scene.add(line);