數百個 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