在 Three.js 中,Line 对象的宽度设置并不像 2D 绘图那样直接。LineBasicMaterial 和其他与线条相关的材质在 WebGL 中对线条宽度的支持有限。默认情况下,WebGL 线条的宽度始终为 1 像素,且大多数 WebGL 实现不支持更改线条宽度。

方法一、使用 let fatLine = new THREE.Mesh( geometry, material )

二、使用 let colorLine = new Line2( geometry, matLine );

这两种方式创建出来的Line是可以设置宽度的。同时,也可以看出来Line2的基类是LineSegments2,LineSegments2的基类是Mesh,Line2和LineSegments2本质上都是一个网格模型,你可以把代码中 Line2替换为THREE.Mesh,显示效果是一样的。