在 3D 場景中，管道是一種極為常見且重要的元素。它不僅能用于呈現(xiàn)工廠、發(fā)電站、地下設(shè)施等工業(yè)環(huán)境中的輸送系統(tǒng)，還可用來模擬數(shù)據(jù)的流動或處理過程，從而向用戶直觀展示數(shù)據(jù)的流向。

在 HT 中，ht.Polyline 是一個強(qiáng)大的工具，可以用來在 3D 場景中表示管道。它不僅支持貼圖，還能通過調(diào)整貼圖的 UV 偏移等屬性，生動地展示數(shù)據(jù)流的方向。ht.Polyline 不僅限于簡單的管道表現(xiàn)，還可以使用它實(shí)現(xiàn)如流動、漫游等的功能。

管道流動

動畫的核心在于控制節(jié)點(diǎn)屬性的變化，而管道流動動畫則是通過在動畫過程中調(diào)節(jié)貼圖的 UV 偏移屬性來實(shí)現(xiàn)的。因此，這種動畫形式也被稱之為 UV 偏移動畫。通過不斷更新 UV 偏移屬性，使得貼圖在節(jié)點(diǎn)表面產(chǎn)生流動的效果。

管道中控制貼圖偏移的屬性是 shape3d.uv.offset，在代碼中不斷遞增/遞減這個屬性值就可實(shí)現(xiàn)流動效果。

具體代碼如下：

varconfig = { 
    duration:1000, 
    easing:t=>t, 
    action:(v, t) =>{    
        polyline.s('shape3d.uv.offset', [v,0]);  
    }, 
    finishFunc:() =>{    
        ht.Default.startAnim(config);  
    }
}
ht.Default.startAnim(config);

管道流動動畫最終呈現(xiàn)的效果如下：

管道的 UV 偏移動畫是一種常用于表現(xiàn)物質(zhì)流動方向的技術(shù)，圖示案例便是典型示例，它極具表現(xiàn)力地呈現(xiàn)出了流動效果。

魚道效果

開發(fā)者可以借此發(fā)揮創(chuàng)造力，利用管道流動動畫實(shí)現(xiàn)更多創(chuàng)新的視覺效果。

例如，使用管道流動來模擬魚道效果。通過繪制多條魚的游動路徑，并在管道上應(yīng)用魚的貼圖，然后通過動畫展現(xiàn)出魚兒在水中游動的逼真場景。這個方法不僅生動形象，還為視覺呈現(xiàn)增添了動態(tài)趣味。

UV 裁切

管道不僅可以通過貼圖實(shí)現(xiàn)流動動畫效果，還能結(jié)合裁切屬性打造更多豐富多樣的視覺效果。例如管道的生長動畫、管道顯示過渡的效果。

管道裁切主要包括兩個屬性：

■裁切方向：3d.clip.direction

■裁切比例：3d.clip.percentage

從裁切方向?qū)傩陨峡蓪⒉们蟹譃?strong>普通裁切和特殊裁切。

普通裁切時，可從六個方向對管道進(jìn)行裁切：

■從右到左裁切：設(shè)置屬性值為 left

■從左到右裁切：設(shè)置屬性值為 right

■從上到下裁切：設(shè)置屬性值為 top

■從下到上裁切：設(shè)置屬性值為 bottom

■從前到后裁切：設(shè)置屬性值為 back

■從后到前裁切：設(shè)置屬性值為 front

除以上提到的六種常規(guī)的裁切方向，為了使得管道沿著 UV 的方向裁切，HT 還提供了 uv.right 或者 uv.left 的裁切方向。使用這兩種裁切方向，場景需要確保開啟 UV 裁切使能：g3d.setUvClipEnabled(true)。

具體的實(shí)現(xiàn)代碼如下：

g3d.setUvClipEnabled(true);// 開啟 UV 裁切使能polyline.s('3d.clip.direction','uv.right')// 設(shè)置管道裁切方向?qū)傩?
ht.Default.startAnim({ 
     duration:1000, 
     easing:t=>t, 
     action:(v, t) =>{    
     polyline.s('3d.clip.percentage', v);  
     }, 
     finishFunc:() =>{}
});

管道漫游

HT 提供了可獲取管道長度 g3d.getLineLength()、根據(jù)百分比獲取管道位置 g3d.getLineOffset() 的 API 。借助這兩個 API，能夠?qū)崿F(xiàn)漫游動畫等效果。

場景漫游

在 HT 在中，開發(fā)者可以通過 eye 和 center 屬性來控制視角。那么漫游就是通過不斷調(diào)整 eye 和 center 實(shí)現(xiàn)。由此可見，我們就可以利用上述提到的 API 來使得場景視角的沿著管道不斷變化的效果。也就是場景漫游的效果。

具體實(shí)現(xiàn)的代碼可以參考如下：

constlength = g3d.getLineLength(polyline);
constroamConfig = { 
    duration:20e3, 
    easing:t=>t, 
    action:(v, t) =>{   
        constoffset = g3d.getLineOffset(polyline, length * v),      
            point = offset.point,      
            px = point.x,      
            py = point.y,      
            pz = point.z,      
            tangent = offset.tangent,      
            tx = tangent.x,      
            ty = tangent.y,      
            tz = tangent.z;    
        g3d.setEye([px, py, pz]);    
        g3d.setCenter([px + tx, py + ty, pz + tz]);  
    }, 
    finishFunc:() =>{}
};
roamAnim = ht.Default.startAnim(roamConfig);

模型漫游動畫

通過上面的示例，我們了解到，可以使用 g3d.getLineOffset() 獲取管道上指定百分比的位置。如果將這一功能用于模型的坐標(biāo)變化，那么就能實(shí)現(xiàn)模型沿著預(yù)設(shè)的管道路徑進(jìn)行位移的動畫效果。也就是模型漫游效果。

具體實(shí)現(xiàn)代碼如下：

const params = {
    duration: 60000,
    easing: function (t) {
        return t;
},
action: function (v, t) {
        const lineLength = g3d.getLineLength(polyline);
        const offset = g3d.getLineOffset(polyline, lineLength * v),
            point = offset.point,
            px = point.x,
            py = point.y,
            pz = point.z,
            tangent = offset.tangent,
            tx = tangent.x,
            ty = tangent.y,
            tz = tangent.z;
        plane.p3(px, py, pz);
        plane.lookAt([px + tx, py + ty, pz + tz], 'front');
    },
    finishFunc: function () {}
};
animation = ht.Default.startAnim(params);

在 HT 中，管道作為一種重要的工具，不僅用于模型的靜態(tài)展示，在動態(tài)表現(xiàn)上也同樣發(fā)揮著關(guān)鍵作用。在工業(yè)領(lǐng)域，它被廣泛應(yīng)用于展示復(fù)雜的管線布控和輸送系統(tǒng)；同時，開發(fā)者也能充分發(fā)揮創(chuàng)意，借助管道實(shí)現(xiàn)豐富多樣的動畫效果。

如果您在管道的使用或創(chuàng)意實(shí)現(xiàn)上有更多想法，或是遇到了相關(guān)問題，歡迎隨時與我們交流探討，期待能與您一同挖掘管道在 3D 場景中的更多可能性~

審核編輯 黃宇