基於html5實現3d監控應用流動效果
流動效果在3d領域有著廣泛的應用場景，如上圖中醫學領域可通過3d的流動直觀的觀察人體血液的流動，燃氣領域可用於監控管道內流動的液體或氣體的流向、流速和溫度等指標。
如今企業資料中心機房普遍面臨著裝置散熱的問題，採用冷熱通道方案可大大提高資料中心的散熱能力，充分有效利用機櫃和機房的空間，因此在電信的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());}, 100);你可以再修改動畫間隔，或者offset每次步進，這樣就可以控制流動的快慢，同時我們通過改變』shape3d.blend』: 『red』可動態改變箭頭的渲染顏色，這樣無需美工提供多種，我們甚至可以根據溫度值等指標動態改變箭頭顏色。
標籤:
html5,
webgl,
3d,
流動,
工控
基於HTML5實現3D監控應用流動效果
流動效果在3d領域有著廣泛的應用場景，如上圖中醫學領域可通過3d的流動直觀的觀察人體血液的流動，燃氣領域可用於監控管道內流動的液體或氣體的流向 流速和溫度等指標。如今企業資料中心機房普遍面臨著裝置散熱的問題，採用冷熱通道方案可大大提高資料中心的散熱能力，充分有效利用機櫃和機房的空間，因此在電信的3d...
基於HTML5技術的電力3D監控應用（一）
最近參與了國網計量中心的四線一庫自動化檢定系統的專案開發，團隊封閉開發了大半年終於快到尾聲了，整個專案過程實在非常累，我的mentor楊楊老師是這樣描述的 累的不想說話了。我估計是我太渴望新知識，整天不斷問他問題把他搞煩了。對於我最有意義的是我終於可以真正從事基於html5技術的開發了，以前呆過幾家...
基於HTML5技術的電力3D監控應用（一）
最近參與了國網計量中心的四線一庫自動化檢定系統的專案開發，團隊封閉開發了大半年終於快到尾聲了，整個專案過程實在非常累，我的mentor楊楊老師是這樣描述的 累的不想說話了。我估計是我太渴望新知識，整天不斷問他問題把他搞煩了。對於我最有意義的是我終於可以真正從事基於html5技術的開發了，以前呆過幾家...