工業(yè)機(jī)械產(chǎn)品大多體積龐大、運(yùn)輸成本高，在參加行業(yè)展會(huì)或向海外客戶銷售時(shí)，如果沒(méi)有實(shí)物展示，僅憑靜態(tài)、簡(jiǎn)單的圖片說(shuō)明書(shū)介紹，無(wú)法讓客戶全面了解產(chǎn)品，不僅工作人員制作麻煩，客戶看得也費(fèi)力。

如果能在 Web 上做 3D 設(shè)備展示，銷售人員可以不限平臺(tái)隨時(shí)給客戶介紹演示。還可以不受現(xiàn)實(shí)條件限制，演示設(shè)備拆分和組裝的過(guò)程，展示產(chǎn)品內(nèi)部結(jié)構(gòu)和動(dòng)態(tài)運(yùn)作時(shí)的效果，讓客戶更直觀了解產(chǎn)品的部件組成，更準(zhǔn)確、全面地了解產(chǎn)品的功能和特點(diǎn)，大大降低了溝通成本。為了解決這些行業(yè)痛點(diǎn)，本篇文章采用 Hightopo 的 HT for Web 產(chǎn)品實(shí)現(xiàn)了一個(gè)發(fā)動(dòng)機(jī)設(shè)備 3D 可視化案例。

發(fā)動(dòng)機(jī)模型是設(shè)計(jì)師通過(guò) 3ds Max 建模，然后導(dǎo)出 obj 與 mtl 文件，在 HT 中解析 obj 與 mtl 文件生成 3D 場(chǎng)景中可用的模型（可參考 obj 手冊(cè)《通過(guò) JSON 加載》章節(jié)），因?yàn)楦鱾€(gè)部件需要單獨(dú)操作，所以設(shè)備模型拆分為多個(gè) obj 文件后導(dǎo)入。

2D 面板部分則是通過(guò) HT 的矢量繪制，我們需要?jiǎng)?chuàng)建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來(lái)呈現(xiàn) 2D 和 3D 的內(nèi)容。相關(guān)代碼如下：var?g2d?=?new?ht.graph.GraphView();var?g3d?=?new?ht.graph3d.Graph3dView();//?將?3D?組件加入到?body?下g3d.addToDOM();//?將?2D?組件加入到?3D?組件的根?div?下g2d.addToDOM(g3d.getView());當(dāng)我們點(diǎn)擊“展開(kāi)”按鈕時(shí)，給各個(gè)動(dòng)畫(huà)設(shè)置不同的延遲，使動(dòng)畫(huà)錯(cuò)開(kāi)執(zhí)行，以達(dá)到更好的視覺(jué)效果，讓 2D 圖紙和 3D 場(chǎng)景更好地聯(lián)動(dòng)起來(lái)。

如果我們的每個(gè)動(dòng)畫(huà)都勻速運(yùn)行，那看起來(lái)難免有些單調(diào)。于是我給不同動(dòng)畫(huà)加上了不同的 Easing 函數(shù)，Easing 函數(shù)通過(guò)定義不同曲線的數(shù)據(jù)公式方式，來(lái)描述每一幀回調(diào)時(shí)需要改變圖形參數(shù)屬性的幅度，從而達(dá)到均勻、先快后慢、先慢后快，甚至先超出起始值和結(jié)束值再慢慢恢復(fù)的各種動(dòng)畫(huà)特效。這里還有個(gè)例子可以幫助我們更直觀的感受不同 Easing 函數(shù)的效果：《From Easing》。

例如圖紙中心的跟隨部件拆解旋轉(zhuǎn)放大的圓環(huán)，我給它設(shè)置了 Easing.backBoth 緩動(dòng)效果，代碼如下：

//?圓環(huán)動(dòng)畫(huà)animCenter(data)?{ht.Default.startAnim({duration:?4500,//?設(shè)置緩動(dòng)函數(shù)easing:?Easing.backBoth,//?延遲一秒執(zhí)行動(dòng)畫(huà)delay:?1000,action:?function?(v,?t)?{//?修改圖元縮放值data.setScale(1?+?v?*?0.9,?1?+?v?*?0.9);//?修改圖元旋轉(zhuǎn)角度data.setRotation(Math.PI?*?v);},});}//?緩動(dòng)函數(shù)Easing.easeOutStrong?=?function?(t)?{var?BACK_CONST?=?1.70158;if?((t?*=?2)?

設(shè)備部件的拆解動(dòng)畫(huà)，是通過(guò)改變節(jié)點(diǎn)的坐標(biāo)和旋轉(zhuǎn)角度來(lái)實(shí)現(xiàn)的，代碼如下：

//?targetP3?為拆解后的坐標(biāo)，p3為當(dāng)前坐標(biāo)var?p3?=?node.p3();var?offset?=?[targetP3[0]?-?p3[0],?targetP3[1]?-?p3[1],?targetP3[2]?-?p3[2]];//?targetR3?為拆解后的旋轉(zhuǎn)角度，r3為當(dāng)前旋轉(zhuǎn)角度var?r3?=?node.r3();var?offset?=?[targetR3[0]?-?r3[0],?targetR3[1]?-?r3[1],?targetR3[2]?-?r3[2]];//?拆解動(dòng)畫(huà)ht.Default.startAnim({duration:?2000,//?設(shè)置緩動(dòng)函數(shù)easing:?Easing.easeOutStrong,delay:?1000,action:?function?(v,?t)?{//?修改節(jié)點(diǎn)坐標(biāo)node.p3(p3[0]?+?offset[0]?*?v,?p3[1]?+?offset[1]?*?v,?p3[2]?+?offset[2]?*?v);//?修改節(jié)點(diǎn)旋轉(zhuǎn)角度node.r3(r3[0]?+?offset[0]?*?v,?r3[1]?+?offset[1]?*?v,?r3[2]?+?offset[2]?*?v);},});//?緩動(dòng)函數(shù)Easing.easeOutStrong?=?function?(t)?{return?1?-?(--t)?*?t?*?t?*?t;};

還有圖紙兩側(cè)的面板，可以通過(guò)設(shè)置它的裁剪方向和裁剪比例實(shí)現(xiàn)隱藏效果，代碼如下：

//?設(shè)置圖元裁剪方向?yàn)閺挠业阶髇ode.s('clip.direction',?'left');//?裁剪動(dòng)畫(huà)ht.Default.startAnim({duration:?1800,easing:?Easing.easeOutStrong,action:?function?(v,?t)?{//?修改圖元裁剪比例node.s('clip.percentage',?1?-?v);}});//?緩動(dòng)函數(shù)Easing.easeOutStrong?=?function?(t)?{return?1?-?(--t)?*?t?*?t?*?t;};

接下來(lái)我們實(shí)現(xiàn)視角變化動(dòng)畫(huà)來(lái)觀察設(shè)備不同部件構(gòu)造，3D 場(chǎng)景中的視角是由 Graph3dView 提供的 center（目標(biāo)點(diǎn)坐標(biāo)）和 eye（攝像機(jī)坐標(biāo)）兩個(gè)參數(shù)決定的，所以視角動(dòng)畫(huà)只要?jiǎng)討B(tài)改變這兩個(gè)參數(shù)，這里用了 HT 提供的 moveCamera 方法實(shí)現(xiàn)，代碼如下：

g3d.moveCamera([-466,?93,?-280],?[40,?-40,?-40],?{duration:?2500,easing:?function?(t)?{return?1?-?(--t)?*?t?*?t?*?t;},});

設(shè)備中一些小的部件吸附在大部件上，會(huì)跟隨大部件移動(dòng)旋轉(zhuǎn)。比如這個(gè)液壓桿，當(dāng)我們要實(shí)現(xiàn)小部件的運(yùn)動(dòng)動(dòng)畫(huà)時(shí)，如果用修改坐標(biāo)的方式計(jì)算起來(lái)比較麻煩，所以我們用修改錨點(diǎn)的方式來(lái)實(shí)現(xiàn)，錨點(diǎn)影響著節(jié)點(diǎn)的位置，錨點(diǎn)也是旋轉(zhuǎn)和縮放的中心點(diǎn)。這里通過(guò)修改液壓桿的 Y 軸錨點(diǎn)實(shí)現(xiàn)動(dòng)畫(huà)，效果如下：

相關(guān)代碼如下：ht.Default.startAnim({duration:?800,action:?function?(v,?t)?{//?修改節(jié)點(diǎn)?Y?軸錨點(diǎn)node.setAnchor3d(0.5,v,0.5);},};

點(diǎn)擊流動(dòng)按鈕后，我們可以看到管道內(nèi)有液體流動(dòng)的動(dòng)畫(huà)。要實(shí)現(xiàn)流動(dòng)效果，首先我們需要一張二方連續(xù)貼圖（左右或上下可以無(wú)縫銜接的貼圖），然后我們?cè)偻ㄟ^(guò)代碼驅(qū)動(dòng) UV 向 U 軸的正值方向偏移一個(gè)象限，并無(wú)限循環(huán)這一動(dòng)作，效果如下：

代碼如下：ht.Default.startAnim({duration:?2000,action:?function?(v,?t)?{//?修改貼圖uv值node.s('shape3d.uv.offset',?[v,?0]);},};

為了能透過(guò)外殼清楚的觀察到設(shè)備內(nèi)部結(jié)構(gòu)，所以當(dāng)鼠標(biāo)懸停在部件上時(shí)，我調(diào)整了外殼模型透明度并設(shè)置模型高亮模式，相關(guān)代碼如下：

//?設(shè)置高亮顏色ht.Style['highlight.color']?=?'rgba(255,255,255,0.6)';//?設(shè)置當(dāng)前高亮的模式g3d.setHighlightMode('mouseover');//?節(jié)點(diǎn)啟用高亮效果data.s('highlight.visible',?true);//?節(jié)點(diǎn)設(shè)置為可交互data.s('interactive',?true);//?節(jié)點(diǎn)開(kāi)啟交互后，不阻止場(chǎng)景上默認(rèn)的交互行為data.s('preventDefaultWhenInteractive',?false);//?監(jiān)聽(tīng)交互事件g3d.mi(function?(e)?{//?鼠標(biāo)移入事件if?(e.kind?===?'onEnter')?{//?節(jié)點(diǎn)開(kāi)啟透明data.s('shape3d.transparent',?true);//?設(shè)置節(jié)點(diǎn)透明度data.s('shape3d.opacity',?0.25);}//?鼠標(biāo)移出事件if?(e.kind?===?'onLeave')?{data.s('shape3d.transparent',?false);}});

最后，我們?cè)賹?duì)整個(gè)場(chǎng)景的視角范圍做下限制，代碼如下：

//?設(shè)置最大角度ht.Default.graph3dViewMaxPhi?=?Math.PI?/?2;//?設(shè)置最小角度ht.Default.graph3dViewMinPhi?=?Math.PI?/?4;

通過(guò)案例我們可以感受到，相較于傳統(tǒng)方式，設(shè)備的三維展示具有更靈活的表現(xiàn)形式和更直觀生動(dòng)的效果，對(duì)于出口型企業(yè)，生動(dòng)的演示動(dòng)畫(huà)能讓外商更快了解產(chǎn)品的工作原理和優(yōu)勢(shì)，還能避免因語(yǔ)言誤差而造成誤解。而且比起普通的工業(yè)動(dòng)畫(huà)，Web 上的可視化系統(tǒng)展示內(nèi)容更豐富、自由度更高，后續(xù)需求更改也更為靈活、成本更低。

本文使用的設(shè)備模型是設(shè)計(jì)師虛構(gòu)的核動(dòng)力發(fā)動(dòng)機(jī)，更注重于模型的展示效果，如果應(yīng)用于實(shí)際產(chǎn)品中，還可以制作更還原實(shí)際的設(shè)備拆解流程，通過(guò)線上的 3D 產(chǎn)品操作演練，對(duì)工作人員進(jìn)行產(chǎn)品組裝、拆分、維修培訓(xùn)。

fqj