我正在使用下面的代码在我的 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]);
它工作得很好，但是当我将“线宽”的值更改为更大或更小的值时，我看不到场景中的任何差异。
我应该如何更改线条的粗细？有任何想法吗？
谢谢，迪米特里斯
您可以通过将浏览器设置为使用本机 OpenGL 而不是 ANGLE 来通过变通方法实现线条粗细的渲染。您可以在此处阅读有关如何在 Chrome 上执行此操作的信息。请记住，如果您切换到本机 OpenGL，您将遇到性能差异。
编辑：
MrDoob 大师自己在这里发布了如何为 Chrome 和 Firefox 执行此操作。
注意： 第一个选项不再是有效的解决方案，因为最新的 OpenGL 版本也不再支持线宽。也检查@gman 他的回答。这意味着如果您想使用线条粗细，则可以使用第二个选项。
THREE.MeshLine类还有另一种解决方案；github上的这个THREE.MeshLine类是一个很好的解决方法。它带有一个特殊的THREE.MeshLineMaterial. 根据文档，它很简单：
- 创建和填充几何图形
- 创建一个
THREE.MeshLine并分配几何- 创建一个
THREE.MeshLineMaterial- 使用
THREE.MeshLine和THREE.MeshLineMaterial创建一个THREE.Mesh
您使用的是 Windows 吗？
我记得这在 Windows 上不起作用，因为它没有在ANGLE 中实现。
这发生在 Windows Chrome 和 Firefox 中，两者都使用 ANGLE（WebGL 到 DirectX 包装器）。
这个问题仍然没有被 ANGLE 项目解决。您可以在此处为问题加星标以获得更高的优先级并在要实施时收到通知：
我使用 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);
这不再是 ANGLE 的问题，而是所有平台的问题。浏览器需要切换到 OpenGL 4+ 核心配置文件以支持 WebGL2，而 OpenGL 4+ 核心配置文件不支持大于 1 的线宽。来自 OpenGL 4.0+ 规范的 E.2.1 部分
E.2.1 已弃用但仍受支持的功能
以下功能已弃用，但仍存在于核心配置文件中。它们可能会从 OpenGL 的未来版本中删除，并在实现核心配置文件的前向兼容上下文中删除。
- 宽线 - LineWidth 值大于 1.0 将生成 INVALID_VALUE 错误。
要绘制更粗的线条，您需要生成几何图形。对于 Three.js 有这个库（Wilt 也指出）