Three.js线宽.lineWidth无效

Three.js线宽.lineWidth无效

在编写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,
} );