Three.js的開發(fā)中，畫線時，使用THREE.Line或者THREE.LineSegments進(jìn)行畫線時，發(fā)現(xiàn)在材質(zhì)中設(shè)置線的寬度并不起作用，在查閱Three.js的文檔發(fā)現(xiàn)，以上方式，對應(yīng)的是webgl中g(shù)l.LINE_STRIP?或者?gl.LINES，這在一些瀏覽器渲染時，并不起作用，所以，Three.js擴展了一個畫粗線的方法，具體的使用方法如下：

相關(guān)的類庫放在Three.js包的example中，首先引用相應(yīng)的js文件

src="three/examples/js/lines/LineSegments2.js"

src="three/examples/js/lines/Line2.js"

src="three/examples/js/lines/LineMaterial.js"

?src="three/examples/js/lines/LineSegmentsGeometry.js"

?src="three/examples/js/lines/LineGeometry.js"

?//初始化一個線的類型

?let linegeometry = new THREE.LineGeometry();

?linegeometry.setPositions('一維數(shù)組類型的坐標(biāo)點，每3個一組');

//初始化線的材質(zhì)

?let matLine = new THREE.LineMaterial({

??? ? ? ? ? ? ?//顏色寬度等屬性設(shè)置，可以通過頂點渲染線，也可以設(shè)置統(tǒng)一顏色

? ? ? ? ? ? ? ? color: 0x0000ff,

? ? ? ? ? ? ? ? linewidth: 2,?

? ? ? ? ? ? ? ? vertexColors: false

? ? ? ? ? ? });

//材質(zhì)的分辨率必須設(shè)置，要不顯示的線寬度不正確

matLine.resolution.set(window.innerWidth, window.innerHeight);

//添加一個線對象，Line2或者LineSegments2都可以

//let?buildoutline?=?new?THREE.Line2(

let buildoutline = new THREE.LineSegments2(linegeometry,matLine);

//場景添加線

scene.add(buildoutline);

實現(xiàn)效果如下：

引用內(nèi)容：

• https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html

• https://threejs.org/docs/index.html?q=line#api/en/objects/Line