Three.js 线宽 .lineWidth 无效

Question

在编写 Three.js 程序的时候，你设置线模型 Line 对应线材质 LineBasicMaterial 的线宽属性 .lineWidth，可能是无效果。

.lineWidth 属性

关于线材质 LineBasicMaterial 和虚线材质 LineDashedMaterial 的线宽属性 .lineWidth 的介绍可以查看Three.js文档。

.lineWidth 属性的主要功能是控制线条粗细,默认值是1。

一般在 Windows 操作系统平台上使用 Three.js 引擎的 WebGL 渲染器 WebGLRenderer 进行渲染的时候，.lineWidth 属性值设置为多少都是无效的，也就是说无论如何设置，线模型线宽都显示为1。

// 基础线材质
var mat = new THREE.LineBasicMaterial({
  color: 0xee1111,
  // 设置无效，线宽显示为1
  linewidth: 6,
});
//线条模型对象
var line = new THREE.Line(geo, mat);

解决方案

整体思路就是使用带状网格模型Mesh表示线条模型Line。

参考 Three.js 官方库案例 three.js-master/examples/webgl_lines_fat.html

参考 github MeshLine：https://github.com/quzheqing/Three.js

webgl_lines_fat.html 案例

引入相关文件，注意 LineGeometry.js 依赖 LineSegmentsGeometry.js，Line2.js 依赖 LineSegments2.js。

<script src='/js/lines/LineSegmentsGeometry.js'></script>
<script src='/js/lines/LineGeometry.js'></script>
<script src='/js/lines/LineMaterial.js'></script>
<script src='/js/lines/LineSegments2.js'></script>
<script src='/js/lines/Line2.js'></script>

写一个案例，引入顶点坐标，绘制一个字母M效果，如果用曲线返回足够多的顶点也可以绘制一个光滑的曲线

阅读 /examples/js/lines 目录下的文件，可以看出来 Line2 的基类是LineSegments2，LineSegments2的基类是Mesh，Line2和LineSegments2 本质上都是一个网格模型，你可以把代码中 THREE.Line2 替换为 THREE.Mesh，显示效果是一样的。

var geometry = new THREE.LineGeometry();
// 顶点坐标构成的数组pointArr
var pointArr = [-100,0,0,
  -100,100,0,
  0,0,0,
  100,100,0,
  100,0,0,]
// 几何体传入顶点坐标
geometry.setPositions( pointArr);
// 自定义的材质
var material  = new THREE.LineMaterial( {
  color: 0xdd2222,
  // 线宽度
  linewidth: 5,
} );
// 把渲染窗口尺寸分辨率传值给材质LineMaterial的resolution属性
// resolution属性值会在着色器代码中参与计算
material.resolution.set(window.innerWidth,window.innerHeight);
var line = new THREE.Line2(geometry, material);

每个顶点对应一个颜色，颜色会进行插值计算。

var colorArr = [
1,0,0,
0,1,0,
0,0,1,
0,1,0,
1,0,0,
]
// 设定每个顶点对应的颜色值
geometry.setColors( colorArr );
var material  = new THREE.LineMaterial( {
  // color: 0xfd1232,
  linewidth: 5,
  // 注释color设置，启用顶点颜色渲染
  vertexColors: THREE.VertexColors,
} );