基於HTML5實現3D監控應用流動效果

流動效果在3D領域有着普遍的應用場景，如上圖中醫學領域可經過3D的流動直觀的觀察人體血液的流動，燃氣領域可用於監控管道內流動的液體或氣體的流向、流速和溫度等指標。

http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 

現在企業數據中心機房廣泛面臨着設備散熱的問題，採用冷熱通道方案可大大提升數據中心的散熱能力，充分有效利用機櫃和機房的空間，所以在電信的3D機房監控領域，也常須要藉助流動的效果，對機房冷熱通道系統進行監控。

Hightopo的HT for Web做爲3D客戶端呈現解決方案，今天介紹的重點不在於採集這些指標，而在於如何應用HT的預約於3D元素來實現流動的效果。在《透過WebGL 3D看動畫Easing函數本質》這篇介紹的基於HT for Web的動畫，是經過改變模型的位置方向來實現動畫，而本文要介紹的方案則是保持模型位置方向不動，而是經過控制模型的貼圖參數uvScale和uvOffset實現流動的控制，這樣實現的好處是沒有增長過多的3D圖元模型，同時可藉助2D的圖片融合到3D進行呈現，畢竟美工改變2D圖片，或程序員內存中動態改變2D圖片，都會比動態改變3D模型來的容易且輕量。

該例子主要應用了ht.Shape類型對象，該對象在ht.graph.GraphView中呈現了多邊形的效果，而該模型在ht.graph3d.Graph3dView中則經常使用於繪製牆面、管道等三維模型對象，在《HT for Web 3D手冊》中有以下的例子，其實已經體現了ht.Shape可做爲牆面和管道而且能夠貼圖的效果，咱們只須要動態改變uvOffset參數便可讓3D物體流動起來。

整個例子咱們僅僅用了上圖的一個箭頭圖片，經過uvScale可設置平鋪的效果，經過設置’front.uv’: [0,1, 1,1, 1,0, 0,0]咱們能夠改變箭頭的方向，最後實現動畫僅僅是這樣一行代碼offset = 0;setInterval(function(){offset += 0.1;shape.s(‘front.uv.offset’, [offset, 0]});}, 100);你能夠再修改動畫間隔，或者offset每次步進，這樣就能夠控制流動的快慢，同時咱們經過改變’shape3d.blend’: ‘red’可動態改變箭頭圖片的渲染顏色，這樣無需美工提供多種圖片，咱們甚至能夠根據溫度值等指標動態改變箭頭顏色。

該例子左下角擺放了ht.graph.GraphView的2D拓撲圖，2D和3D共同綁定ht.DataModel的數據模型，所以可隨意操做2D拓撲或3D引擎上的圖形組件，你會發現他們會自動聯動，任何一處的改變會同時在另外一個組件上實時呈現改變效果，這也是HT全部組件可綁定同一數據模型的OVM(Object-View mapping)設計模式帶來的好處：

如下是段操做HT for Web中3D流動例子的視頻供參考，基於HT預約義的模型還有不少自定義效果，你們能夠發揮想象力讓3D的流動效果發揮出更多難以想象的應用場景效果：http://v.youku.com/v_show/id_XNzIyMjQyNTg0.html