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

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 的基类是 LineSegments2LineSegments2 的基类是 MeshLine2LineSegments2 本质上都是一个网格模型,你可以把代码中 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,
} );
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章