深入理解Three.js中線條Line，LinLoop，LineSegments

前言

在可視化開發中，無論是2d（canvas）開發還是3d開發，線條的繪制應用都是比較普遍的。比如繪制城市之間的遷徙圖，運行軌跡圖等。本文主要講解的是Three.js中三種線條Line，LineLoop，LineSegments之間的區別，每種線條的原理和對應參數的含義，以及如何選擇使用場景等問題。Three.js中提供了兩種線條材質，分別是LineBasicMaterial和LineDashedMaterial，本文中講解到的示例都使用LineBasicMaterial材質，后續也會專門總結相關材質的文章為讀者解答Three.js相關材質的問題。

原理說明

Three.js中渲染線條提供了三個API，分別是gl.LINE_STRIP，gl.LINES，gl.LINE_LOOP。gl.LINE_STRIP用於渲染一系列的點，會從第一個點開始到最后一個點依次連接起來；gl.LINES用於渲染兩兩組合的點，它會將我們傳遞的一系列點自動分配成兩個點為一組，然后將分成的每個組中的兩個點連接；gl.LINE_LOOP用於渲染一系列的點，但是這個API和gl.LINE_STRIP最大的不同是所有點渲染完之后會將第一個點和最后一個點連接，達到閉合狀態。

1 Line

Line用於將一系列點繪制成一條連續的線，Three.js渲染Line使用的是gl.LINE_STRIP，Line會將我們存儲在Geometry的點依次連接起來形成線條，這種線條在實際項目中一般用於繪制遷徙軌跡或者繪制已知點的線條。創建一個Line的代碼如下：

var geometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
    color: '#ff0000'
});
geometry.vertices.push(
    new THREE.Vector3(20,20,0),
    new THREE.Vector3(20,-20,0),
    new THREE.Vector3(-20,-20,0),
    new THREE.Vector3(-20,20,0)
)

var line = new THREE.Line(geometry, lineMaterial);
scene.add(line);EE.LineLoop(geometry, lineMaterial);
scene.add(line);

2 LineLoop

LineLoop用於將一系列點繪制成一條連續的線，它和Line幾乎一樣，唯一的區別就是所有點連接之后會將第一個點和最后一個點相連接，這種線條在實際項目中用於繪制某個區域，比如在地圖上用線條勾選出某一區域。Three.js渲染LineLoop使用的是gl.LINE_LOOP。創建一個LineLoop的代碼如下：

var geometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
    color: '#ff0000'
});
geometry.vertices.push(
    new THREE.Vector3(20,20,0),
    new THREE.Vector3(20,-20,0),
    new THREE.Vector3(-20,-20,0),
    new THREE.Vector3(-20,20,0)
)
 
var line = new THREE.LineLoop(geometry, lineMaterial);
scene.add(line);

3 LineSegments

LineSegments用於將兩個點連接為一條線，它會將我們傳遞的一系列點自動分配成兩個為一組，然后將分配好的兩個點連接，這種先天實際項目中主要用於繪制具有相同開始點，結束點不同的線條，比如常用到的遺傳圖。Three.js渲染LineSegments使用的是gl.LINES。創建一個LineSegments的代碼如下：

var geometry = new THREE.Geometry();
var lineMaterial = new THREE.LineBasicMaterial({
    color: '#ff0000'
});
geometry.vertices.push(
    new THREE.Vector3(20,20,0),
    new THREE.Vector3(20,-20,0),
    new THREE.Vector3(-20,-20,0),
    new THREE.Vector3(-20,20,0)
)

var line = new THREE.LineSegments(geometry, lineMaterial);
scene.add(line);

基於上述講解的知識點有一點需要說明下，如果僅僅是繪制兩個點之間的一條線段，那么上述三種實現方式都是沒有什么區別的，實現效果都是一樣的。

實例

該實例中，充分應用了文章中講解的三種線條Line，LineLoop，LineSegments構建了一個線條框架。框架頂部具有相同的頂點，從這個頂點到定點下正方形四邊上的點之間的線條通過LineSegments來實現，四周的四邊形線條通過LineLoop來實現，框架內部懸掛的球體連接的線使用Line來實現。

實例效果圖如下：

 

預覽地址：深入理解Three.js中線條Line，LinLoop，LineSegments

后話

希望上述講解能夠幫助到閱讀這篇博文的讀者！！！