數百個 HTML5 例子學習 HT 圖形元件 – WebGL 3D 篇

《數百個 HTML5 例子學習 HT 圖形元件 – 拓撲圖篇》一文讓讀者瞭解了 HT 的 2D 拓撲圖元件使用，本文將對 HT 的 3D 功能做個綜合性的介紹，以便初學者可快速上手使用 HT 構建例如電信網管 3D 機房應用、水務燃氣 SCADA 監控應用及智慧樓宇等應用場景。

HT for Web 的 3D 是完全基於 WebGL 技術實現的渲染引擎，但開發者幾乎不需要了解 3D 圖形數學或 Shader 渲染的底層技術，只需要掌握基本的 3D 座標系和相機  Camera 的概念，剩下需要掌握的也就是基本 JavaScript 的面對物件程式設計知識，即可快速開發各種豐富的 3D 場景應用。

對於座標系、相機和投影概念，以及 HT 的 2D 模型和 3D 模型之間的關係在 《HT for Web 3D 手冊》中有詳細描述：http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html。HT 封裝得很人性化，所以大部分情況下你都不需要調整或深入瞭解這些晦澀的 3D 引數，例如對於燈光，很多 HT 使用者開發完 3D 的應用場景，都完全不需要學習任何燈光相關的技術知識。

初學者即使只使用 HT for Web 開發 3D 應用的，我們一般也會建議先閱讀一遍《數百個 HTML5 例子學習 HT 圖形元件 – 拓撲圖篇》文章，因為 HT 的所有元件採用的都是統一的 DataModel 資料模型，採用相同的 MVP 設計模型，類 Flux 的單向流設計理念，所以只要掌握了拓撲圖篇的介紹的幾個技術點後，你基本就掌握了所有 HT 元件的使用方式。

除了拓撲圖篇的內容外，你也可以通過《HT for Web 入門手冊》掌握 HT 使用的基本思路，然後你就可以閱讀《HT for Web 3D 手冊》了，先入為主的就是下圖這個電信網管 3D 機房監控的綜合性例子：http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html

 

該 3D 機房例子完全用 API 構建，展示了門、窗、伺服器、告警、燈光等基本場景內容，並支援移動、編輯、雙擊開門等互動動作，對於機房的很多內容都可以通過六面體、球體、圓柱體等基礎模型，像構建樂高積木那樣組合而成。可能有人會好奇全用 API 的方式能整出多少花樣呢？

好吧，我就列舉些採用 HT 的純 API 方式構建的 3D 例子供參考：

A星尋路演算法 3D 模擬：http://www.hightopo.com/demo/astar/astar.html

 

3D 漢諾塔演算法演示：http://www.hightopo.com/demo/hanoi_20151106/index.html

3D 熱力圖：http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example_heatmap3d.html

 

Box2D 物理碰撞 3D 例子：http://www.hightopo.com/demo/box2djs/ht-box2d-demo.html

裝置管理 EMS 系統：http://www.hightopo.com/guide/guide/core/databinding/examples/example_ems.html

Easing 動畫型別：http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html

3D 網路拓撲圖：http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example_forcelayout3.html

書架場景，亮點自尋：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_bookshelf.html

燈光舞臺流動場景：http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html

2D 和 3D 模型聯動的可編輯房間場景：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_csgshape.html

各種樣式的茶杯座椅場景：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_custommodel.html

 

一百行程式碼實現的 3D 貪吃蛇遊戲：http://www.hightopo.com/demo/snake_20151106/GreedySnake.html

帶可控制埠的 3D 伺服器演示：http://www.hightopo.com/demo/hp5406/hp5406-rotation.html

腦洞開啟了吧，其實純 3D API 還是能做很多效果的，更多例子參考：http://www.hightopo.com/demos/index.html。另外你也可以採用 HT 輔助的 3D 編輯器所見即所得的快速搭建出三維場景：

當然不同的行業客戶也會根據自己需要打造更適合自己專案的 3D 編輯器：

但純 API 的方式對於複雜的模型就很難實現了，所以對於複雜的模型我們就可以利用主流的 3D 設計工具如 3DMaxs，Maya 或 Blender 等進行設計，然後匯出 OBJ 格式供 HT 讀入使用，可參考《HT for Web 的 OBJ 手冊》http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html ，HT 手冊中也有眾多采用 OBJ 的應用例子：

可控指標的燃氣表記：http://www.hightopo.com/guide/guide/plugin/obj/examples/example_meter.html

飛機飛行軌道例子：http://www.hightopo.com/guide/guide/plugin/obj/examples/example_path.html

摩托車模型結合燈光例子：http://www.hightopo.com/guide/guide/core/lighting/examples/example_pointlight.html

可開關複雜 3D 門窗：http://www.hightopo.com/guide/guide/plugin/obj/examples/example_room.html

跑道飛馳汽車：http://www.hightopo.com/demo/media/index.html

筆記本模型例子：http://www.hightopo.com/guide/guide/core/schedule/examples/example_network.html

 

可控燃氣監控系統 http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

並且 OBJ 匯入的模型依然可以進行資料繫結和動態實時驅動，這個話題後續我再以伺服器扇葉旋轉為例子展開詳細介紹，本篇先到此為止，大家可玩下電信網管 3D 機房監控系統場景中，常見的伺服器機櫃和帶風扇旋轉功能的例子：http://www.hightopo.com/demo/fan3d/demo-enhanced.html