基於 HTML5 WebGL 的發動機 3D 可視化系統
摘要:// 拆解動畫 ht.Default.startAnim({ duration: 2000, // 設置緩動函數 easing: Easing.easeOutStrong, delay: 1000, action: function (v, t) { // 修改節點座標 node.p3(p3[0] + offset[0] * v, p3[1] + offset[1] * v, p3[2] + offset[2] * v)。// 圓環動畫 animCenter(data) { ht.Default.startAnim({ duration: 4500, // 設置緩動函數 easing: Easing.backBoth, // 延遲一秒執行動畫 delay: 1000, action: function (v, t) { // 修改圖元縮放值 data.setScale(1 + v \* 0.9, 1 + v \* 0.9)。
前言
工業機械產品大多體積龐大、運輸成本高,在參加行業展會或向海外客戶銷售時,如果沒有實物展示,僅憑靜態、簡單的圖片說明書介紹,無法讓客戶全面瞭解產品,不僅工作人員製作麻煩,客戶看得也費力。如果能在 Web 上做 3D 設備展示,銷售人員可以不限平臺隨時給客戶介紹演示。還可以不受現實條件限制,演示設備拆分和組裝的過程,展示產品內部結構和動態運作時的效果,讓客戶更直觀瞭解產品的部件組成,更準確、全面地瞭解產品的功能和特點,大大降低了溝通成本。爲了解決這些行業痛點,本篇文章採用 Hightopo 的 HT for Web 產品實現了一個發動機設備 3D 可視化案例。
系統預覽
預覽地址:基於 HTML5 WebGL 的發動機 3D 可視化系統( http://www.hightopo.com/demo/engine/ )
場景搭建
發動機模型是設計師通過 3ds Max 建模,然後導出 obj 與 mtl 文件,在 HT 中解析 obj 與 mtl 文件生成 3D 場景中可用的模型(可參考 obj 手冊《 通過JSON加載 》章節),因爲各個部件需要單獨操作,所以設備模型拆分爲多個 obj 文件後導入。
2D 面板部分則是通過 HT 的矢量繪製,我們需要創建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現 2D 和 3D 的內容。相關代碼如下:
var g2d = new ht.graph.GraphView(); var g3d = new ht.graph3d.Graph3dView(); // 將 3D 組件加入到 body 下 g3d.addToDOM(); // 將 2D 組件加入到 3D 組件的根 div 下 g2d.addToDOM(g3d.getView());
功能實現
設備拆解動畫
當我們點擊“展開”按鈕時,給各個動畫設置不同的延遲,使動畫錯開執行,以達到更好的視覺效果,讓2D圖紙和3D場景更好地聯動起來。
如果我們的每個動畫都勻速運行,那看起來難免有些單調。於是我給不同動畫加上了不同的 Easing 函數,Easing 函數通過定義不同曲線的數據公式方式,來描述每一幀回調時需要改變圖形參數屬性的幅度,從而達到均勻、先快後慢、先慢後快,甚至先超出起始值和結束值再慢慢恢復的各種動畫特效。這裏還有個例子可以幫助我們更直觀的感受不同 Easing 函數的效果:《 From Easing 》。
例如圖紙中心的跟隨部件拆解旋轉放大的圓環,我給它設置了 Easing.backBoth 緩動效果,代碼如下:
// 圓環動畫 animCenter(data) { ht.Default.startAnim({ duration: 4500, // 設置緩動函數 easing: Easing.backBoth, // 延遲一秒執行動畫 delay: 1000, action: function (v, t) { // 修改圖元縮放值 data.setScale(1 + v \* 0.9, 1 + v \* 0.9); // 修改圖元旋轉角度 data.setRotation(Math.PI \* v); }, }); } // 緩動函數 Easing.easeOutStrong = function (t) { var BACK\_CONST = 1.70158; if ((t \*= 2) < 1) { return .5 \* (t \* t \* (((BACK\_CONST \*= (1.525)) + 1) \* t - BACK\_CONST)); } return .5 \* ((t -= 2) \* t \* (((BACK\_CONST \*= (1.525)) + 1) \* t + BACK\_CONST) + 2); };
設備部件的拆解動畫,是通過改變節點的座標和旋轉角度來實現的,代碼如下:
// targetP3 爲拆解後的座標,p3爲當前座標 var p3 = node.p3(); var offset = [targetP3[0] - p3[0], targetP3[1] - p3[1], targetP3[2] - p3[2]]; // targetR3 爲拆解後的旋轉角度,r3爲當前旋轉角度 var r3 = node.r3(); var offset = [targetR3[0] - r3[0], targetR3[1] - r3[1], targetR3[2] - r3[2]]; // 拆解動畫 ht.Default.startAnim({ duration: 2000, // 設置緩動函數 easing: Easing.easeOutStrong, delay: 1000, action: function (v, t) { // 修改節點座標 node.p3(p3[0] + offset[0] * v, p3[1] + offset[1] * v, p3[2] + offset[2] * v); // 修改節點旋轉角度 node.r3(r3[0] + offset[0] * v, r3[1] + offset[1] * v, r3[2] + offset[2] * v); }, }); // 緩動函數 Easing.easeOutStrong = function (t) { return 1 - (--t) * t * t * t; };
還有圖紙兩側的面板,可以通過設置它的裁剪方向和裁剪比例實現隱藏效果,代碼如下:
// 設置圖元裁剪方向爲從右到左 node.s('clip.direction', 'left'); // 裁剪動畫 ht.Default.startAnim({ duration: 1800, easing: Easing.easeOutStrong, action: function (v, t) { // 修改圖元裁剪比例 node.s('clip.percentage', 1 - v); } }); // 緩動函數 Easing.easeOutStrong = function (t) { return 1 - (--t) \* t \* t \* t; };
設備內部運作動畫
接下來我們實現視角變化動畫來觀察設備不同部件構造,3D 場景中的視角是由 Graph3dView 提供的 center(目標點座標)和 eye(攝像機座標)兩個參數決定的,所以視角動畫只要動態改變這兩個參數,這裏用了 HT 提供的 moveCamera 方法實現,代碼如下:
g3d.moveCamera([-466, 93, -280], [40, -40, -40], { duration: 2500, easing: function (t) { return 1 - (--t) * t * t * t; }, });
設備中一些小的部件吸附在大部件上,會跟隨大部件移動旋轉。比如這個液壓桿,當我們要實現小部件的運動動畫時,如果用修改座標的方式計算起來比較麻煩,所以我們用修改錨點的方式來實現,錨點影響着節點的位置,錨點也是旋轉和縮放的中心點。這裏通過修改液壓桿的 Y 軸錨點實現動畫,效果如下:
相關代碼如下:
ht.Default.startAnim({ duration: 800, action: function (v, t) { // 修改節點 Y 軸錨點 node.setAnchor3d(0.5,v,0.5); }, };
點擊流動按鈕後,我們可以看到管道內有液體流動的動畫。要實現流動效果,首先我們需要一張二方連續貼圖(左右或上下可以無縫銜接的貼圖),然後我們再通過代碼驅動 UV 向 U 軸的正值方向偏移一個象限,並無限循環這一動作,效果如下:
代碼如下:
ht.Default.startAnim({ duration: 2000, action: function (v, t) { // 修改貼圖uv值 node.s('shape3d.uv.offset', [v, 0]); }, };
設備復原動畫
鼠標移入效果
爲了能透過外殼清楚的觀察到設備內部結構,所以當鼠標懸停在部件上時,我調整了外殼模型透明度並設置模型高亮模式,相關代碼如下:
// 設置高亮顏色 ht.Style['highlight.color'] = 'rgba(255,255,255,0.6)'; // 設置當前高亮的模式 g3d.setHighlightMode('mouseover'); // 節點啓用高亮效果 data.s('highlight.visible', true); // 節點設置爲可交互 data.s('interactive', true); // 節點開啓交互後,不阻止場景上默認的交互行爲 data.s('preventDefaultWhenInteractive', false); // 監聽交互事件 g3d.mi(function (e) { // 鼠標移入事件 if (e.kind === 'onEnter') { // 節點開啓透明 data.s('shape3d.transparent', true); // 設置節點透明度 data.s('shape3d.opacity', 0.25); } // 鼠標移出事件 if (e.kind === 'onLeave') { data.s('shape3d.transparent', false); } });
場景視角限制
最後,我們再對整個場景的視角範圍做下限制,代碼如下:
// 設置最大角度 ht.Default.graph3dViewMaxPhi = Math.PI \* 1 / 2; // 設置最小角度 ht.Default.graph3dViewMinPhi = Math.PI \* 1 / 4;
總結
通過案例我們可以感受到,相較於傳統方式,設備的三維展示具有更靈活的表現形式和更直觀生動的效果,對於出口型企業,生動的演示動畫能讓外商更快了解產品的工作原理和優勢,還能避免因語言誤差而造成誤解。而且比起普通的工業動畫,Web 上的可視化系統展示內容更豐富、自由度更高,後續需求更改也更爲靈活、成本更低。
本文使用的設備模型是設計師虛構的核動力發動機,更注重於模型的展示效果,如果應用於實際產品中,還可以製作更還原實際的設備拆解流程,通過線上的 3D 產品操作演練,對工作人員進行產品組裝、拆分、維修培訓。有興趣可以參考我們另一個案例《 基於 HTML5 WebGL + WebVR 的 3D 虛擬現實可視化培訓系統 》。