Three.js线宽.lineWidth无效 - 郭隆邦

一般在windows操作系统平台上使用Three.js引擎的WebGL渲染器 WebGLRenderer 进行渲染的时候， .lineWidth 属性值设置为多少都是无效的，也就是说无论如何设置，线模型线宽 ... 郭隆邦_技术博客 首页 Three.js中文文档 3D案例 Three.js教程 WebGL教程 工具资源 Three.js线宽.lineWidth无效 在编写Three.js程序的时候，你设置线模型Line对应线材质LineBasicMaterial的线宽属性.lineWidth，可能是无效果。

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

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

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

//基础线材质 varmat=newTHREE.LineBasicMaterial({ color:0xee1111, //设置无效，线宽显示为1 linewidth:6, }); //线条模型对象 varline=newTHREE.Line(geo,mat); 解决方案 整体思路就是使用带状网格模型Mesh表示线条模型Line。

参考Three.js官方库案例three.js-master/examples/webgl_lines_fat.html 参考githubMeshLine：https://github.com/quzheqing/Three.js webgl_lines_fat.html案例 引入相关文件，注意LineGeometry.js依赖LineSegmentsGeometry.js，Line2.js依赖LineSegments2.js。

写一个案例，引入顶点坐标，绘制一个字母M效果，如果用曲线返回足够多的顶点也可以绘制一个光滑的曲线 阅读/examples/js/lines目录下的文件，可以看出来Line2的基类是LineSegments2，LineSegments2的基类是Mesh，Line2和LineSegments2本质上都是一个网格模型，你可以把代码中THREE.Line2替换为THREE.Mesh，显示效果是一样的。

vargeometry=newTHREE.LineGeometry(); //顶点坐标构成的数组pointArr varpointArr=[-100,0,0, -100,100,0, 0,0,0, 100,100,0, 100,0,0,] //几何体传入顶点坐标 geometry.setPositions(pointArr); //自定义的材质 varmaterial=newTHREE.LineMaterial({ color:0xdd2222, //线宽度 linewidth:5, }); //把渲染窗口尺寸分辨率传值给材质LineMaterial的resolution属性 //resolution属性值会在着色器代码中参与计算 material.resolution.set(window.innerWidth,window.innerHeight); varline=newTHREE.Line2(geometry,material); 每个顶点对应一个颜色，颜色会进行插值计算。

varcolorArr=[ 1,0,0, 0,1,0, 0,0,1, 0,1,0, 1,0,0, ] //设定每个顶点对应的颜色值 geometry.setColors(colorArr); varmaterial=newTHREE.LineMaterial({ //color:0xfd1232, linewidth:5, //注释color设置，启用顶点颜色渲染 vertexColors:THREE.VertexColors, }); 本站版权所有，本站任何内容未经允许不得转载   备案号：豫ICP备16004767号 QQ群：187740169(WebGL-Three.js教程)   邮箱：[email protected]