在 3D 場景中,管道是一種極為常見且重要的元素。它不僅能用于呈現工廠、發電站、地下設施等工業環境中的輸送系統,還可用來模擬數據的流動或處理過程,從而向用戶直觀展示數據的流向。
在 HT 中,ht.Polyline 是一個強大的工具,可以用來在 3D 場景中表示管道。它不僅支持貼圖,還能通過調整貼圖的 UV 偏移等屬性,生動地展示數據流的方向。ht.Polyline 不僅限于簡單的管道表現,還可以使用它實現如流動、漫游等的功能。
管道流動
動畫的核心在于控制節點屬性的變化,而管道流動動畫則是通過在動畫過程中調節貼圖的 UV 偏移屬性來實現的。因此,這種動畫形式也被稱之為 UV 偏移動畫。通過不斷更新 UV 偏移屬性,使得貼圖在節點表面產生流動的效果。
管道中控制貼圖偏移的屬性是 shape3d.uv.offset,在代碼中不斷遞增/遞減這個屬性值就可實現流動效果。
具體代碼如下:
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);
管道流動動畫最終呈現的效果如下:
管道的 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 來使得場景視角的沿著管道不斷變化的效果。也就是場景漫游的效果。
具體實現的代碼可以參考如下:
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() 獲取管道上指定百分比的位置。如果將這一功能用于模型的坐標變化,那么就能實現模型沿著預設的管道路徑進行位移的動畫效果。也就是模型漫游效果。
具體實現代碼如下:
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 場景中的更多可能性~
審核編輯 黃宇
-
可視化
+關注
關注
1文章
1266瀏覽量
21925 -
數字孿生
+關注
關注
4文章
1497瀏覽量
12895
發布評論請先 登錄
SciChart 3D for WPF圖表庫

騰訊混元3D AI創作引擎正式發布
騰訊混元3D AI創作引擎正式上線
uvled光固化3d打印技術




安寶特產品 安寶特3D Analyzer:智能的3D CAD高級分析工具

評論