數百個 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
來自：http://www.hightopo.com/blog/504.html