需求描述

模擬管道流動的漫游動畫

思路

首先想到的是用截面的方式，復(fù)制一個管道模型，改變其透明度和顏色，創(chuàng)建切面，這種方法存在的問題是，切面的方向和大小不容易控制，如果一個切面上有兩根管子，就會一起顯示出來，這種方法就pass了。第二種方法想到的是畫線的方式，想要根據(jù)坐標(biāo)的位置的動態(tài)畫線，這種方法遇到的問題是連接的線不能動態(tài)的畫出來，是瞬間連起來的，如果坐標(biāo)間隔小的話，還是可以實(shí)現(xiàn)的，如果管子太長的話，這種方法就不適用了。最終的方案是，兩種方法結(jié)合一下，這樣需要的坐標(biāo)少，流動更連貫。

實(shí)現(xiàn)步驟

1.管道線條

記錄管道初始坐標(biāo)、拐角處坐標(biāo)和結(jié)束坐標(biāo)，根據(jù)這些坐標(biāo)畫一條與管道粗細(xì)相近的線，設(shè)置線條的linewidth屬性，此處畫線是坐標(biāo)數(shù)組中每相鄰兩個點(diǎn)畫一條，而不能成為一個整體，否則后續(xù)截面無法操作。

注意：THREE.Line和LineBasicMaterial創(chuàng)建的線條，linewidth屬性不生效，這里可以使用Line2、LineMaterial和LineGeometry。下圖中倒數(shù)第二句是必加的。

Line2

這種方法的線條有一個缺點(diǎn)就是線條寬度不會隨著滾輪縮放模型而變化，但是需要在窗口大小變化時改變材質(zhì)的resolution屬性。

resize

2.截面方向

記錄每一條線段的延伸方向（也可以通過計算得出），注意，第一個坐標(biāo)是否自畫一條直線。

3.動畫時間

通過延伸方向和坐標(biāo)數(shù)據(jù)計算兩點(diǎn)之間距離，形成合適的動畫時間數(shù)組。

動畫時間

4.截面動畫

從第一條線段開始，前一個動畫結(jié)束之時，遞歸調(diào)用動畫函數(shù)，截面方向、動畫時間上述步驟已算出。

注意：1.相機(jī)漫游時的lookAt要在相機(jī)動畫的onUpdate回調(diào)函數(shù)中設(shè)置，確保漫游時相機(jī)朝向。

2.創(chuàng)建截面時需要世界坐標(biāo)，而線幾何體本身沒有世界坐標(biāo)，可以通過new THREE.Box3().setFromObject(lineModel)，使線幾何體可以使用世界坐標(biāo)。

3.截面動畫和相機(jī)動畫需要同時進(jìn)行，動畫持續(xù)時間相同，均為步驟3中計算所得。

成果

流動后