在vue+three.js中存在一个Line2.js的构造类,如图所示:

#yyds干货盘点#three.js +vue中使用Line2.js绘制有宽度的线条_three.js+vue

通过该类可以绘制有宽度的线条

1.代码

import { Line2 } from 'three/examples/jsm/lines/Line2'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'

const geometry = new LineGeometry()
const pointArr = [
-100,
0,
-100,
-100,
0,
100,
100,
0,
100,
100,
0,
-100,
-100,
0,
-100
]
geometry.setPositions(pointArr)
const material = new LineMaterial({
color: 'red',
linewidth: 15
})
material.resolution.set(window.innerWidth, window.innerHeight)
const line = new Line2(geometry, material)
line.computeLineDistances()
this.scene.add(line)
const boxHelper = threeHelper.addBoxHelper(line)
this.scene.add(boxHelper)

2.总结

  • 需要引入Line2、LineGeometry、LineMaterial