THREE.js绘制粗线条

最新推荐文章于 2023-10-11 09:58:43 发布

废柴小z

最新推荐文章于 2023-10-11 09:58:43 发布

阅读量658

点赞数 1

文章标签： three.js

本文链接：https://blog.csdn.net/qq_34568700/article/details/130392126

版权

Three.js的开发中，画线时，使用THREE.Line或者THREE.LineSegments进行画线时，发现在材质中设置线的宽度并不起作用，在查阅Three.js的文档发现，以上方式，对应的是webgl中gl.LINE_STRIP 或者 gl.LINES，这在一些浏览器渲染时，并不起作用，所以，Three.js扩展了一个画粗线的方法，具体的使用方法如下：

相关的类库放在Three.js包的example中，首先引用相应的js文件

import * as THREE from 'three'
import OrbitControls from 'three-orbitcontrols'
import { Line2 } from 'three/examples/jsm/lines/Line2'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'

var geometry = new LineGeometry()
var pointArr = [
        -100, 0, 0,
        -100, 100, 0,
        0, 0, 0,
        100, 100, 0,
        100, 0, 0
      ]
geometry.setPositions(pointArr)
var material = new LineMaterial({
		//颜色宽度等属性设置，可以通过顶点渲染线，也可以设置统一颜色
        color: 0xffffff,
        linewidth: 5
      })
 //材质的分辨率必须设置，要不显示的线宽度不正确
material.resolution.set(window.innerWidth, window.innerHeight)
var line = new Line2(geometry, material)
line.computeLineDistances()
scene.add(line)