在 3D 場景中，管道是一種極為常見且重要的元素。它不僅能用於呈現工廠、發電站、地下設施等工業環境中的輸送系統，還可用來模擬數據的流動或處理過程，從而向用户直觀展示數據的流向。
在 HT 中，ht.Polyline 是一個強大的工具，可以用來在 3D 場景中表示管道。它不僅支持貼圖，還能通過調整貼圖的 UV 偏移等屬性，生動地展示數據流的方向。ht.Polyline 不僅限於簡單的管道表現，還可以使用它實現如流動、漫遊等的功能。
實現步驟
管道流動
動畫的核心在於控制節點屬性的變化，而管道流動動畫則是通過在動畫過程中調節貼圖的 UV 偏移屬性來實現的。因此，這種動畫形式也被稱之為 UV 偏移動畫。通過不斷更新 UV 偏移屬性，使得貼圖在節點表面產生流動的效果。
管道中控制貼圖偏移的屬性是 shape3d.uv.offset，在代碼中不斷遞增/遞減這個屬性值就可實現流動效果。
具體代碼如下：
var config = {
duration: 1000,
easing: t => t,
action: (v, t) => {
polyline.s('shape3d.uv.offset', [v, 0]);
},
finishFunc: () => {
ht.Default.startAnim(config);
}
}
ht.Default.startAnim(config);管道流動動畫最終呈現的效果如下：
管道的 UV 偏移動畫是一種常用於表現物質流動方向的技術，圖示案例便是典型示例，它極具表現力地呈現出了流動效果。
魚道效果
開發者可以藉此發揮創造力，利用管道流動動畫實現更多創新的視覺效果。
例如，使用管道流動來模擬魚道效果。通過繪製多條魚的遊動路徑，並在管道上應用魚的貼圖，然後通過動畫展現出魚兒在水中游動的逼真場景。這個方法不僅生動形象，還為視覺呈現增添了動態趣味。
UV 裁切
管道不僅可以通過貼圖實現流動動畫效果，還能結合裁切屬性打造更多豐富多樣的視覺效果。例如管道的生長動畫、管道顯示過渡的效果。
管道裁切主要包括兩個屬性：
- 裁切方向：3d.clip.direction
- 裁切比例：3d.clip.percentage
從裁切方向屬性上可將裁切分為普通裁切和特殊裁切。
普通裁切時，可從六個方向對管道進行裁切：
- 從右到左裁切：設置屬性值為 left
- 從左到右裁切：設置屬性值為 right
- 從上到下裁切：設置屬性值為 top
- 從下到上裁切：設置屬性值為 bottom
- 從前到後裁切：設置屬性值為 back
- 從後到前裁切：設置屬性值為 front
除以上提到的六種常規的裁切方向，為了使得管道沿着 UV 的方向裁切，HT 還提供了 uv.right 或者 uv.left 的裁切方向。使用這兩種裁切方向，場景需要確保開啓 UV 裁切使能：g3d.setUvClipEnabled(true)。
具體的實現代碼如下：
g3d.setUvClipEnabled(true); // 開啓 UV 裁切使能
polyline.s('3d.clip.direction', 'uv.right') // 設置管道裁切方向屬性
ht.Default.startAnim({
duration: 1000,
easing: t => t,
action: (v, t) => {
polyline.s('3d.clip.percentage', v);
},
finishFunc: () => {}
});
管道漫遊
HT 提供了可獲取管道長度 g3d.getLineLength()、根據百分比獲取管道位置 g3d.getLineOffset() 的 API 。藉助這兩個 API，能夠實現漫遊動畫等效果。
場景漫遊
在 HT 在中，開發者可以通過 eye 和 center 屬性來控制視角。那麼漫遊就是通過不斷調整 eye 和 center 實現。由此可見，我們就可以利用上述提到的 API 來使得場景視角的沿着管道不斷變化的效果。也就是場景漫遊的效果。
具體實現的代碼可以參考如下：
const length = g3d.getLineLength(polyline);
const roamConfig = {
duration: 20e3,
easing: t => t,
action: (v, t) => {
const offset = 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() 獲取管道上指定百分比的位置。如果將這一功能用於模型的座標變化，那麼就能實現模型沿着預設的管道路徑進行位移的動畫效果。也就是模型漫遊效果。
具體實現代碼如下：
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 中，管道作為一種重要的工具，不僅用於模型的靜態展示，在動態表現上也同樣發揮着關鍵作用。在工業領域，它被廣泛應用於展示覆雜的管線布控和輸送系統；同時，開發者也能充分發揮創意，藉助管道實現豐富多樣的動畫效果。
如果您在管道的使用或創意實現上有更多想法，或是遇到了相關問題，歡迎隨時與我們交流探討，期待能與您一同挖掘管道在 3D 場景中的更多可能性：https://www.hightopo.com/cn-index.html
