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/...

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();// 顶点坐标构成的数组pointArrvar 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,} );