http://www.hightopo.com/demo/pipeline/index.htmlhtml
《數百個 HTML5 例子學習 HT 圖形組件 – WebGL 3D 篇》裏提到 HT 不少狀況下不須要藉助 3Ds Max 和 Blender 等專業 3D 建模工具也能作出不少效果,例如 http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 這個 3D 電信機房監控例子整個都是經過 HT 提供的 API 構建而成:數組
不過這個例子中的模型都比較規矩,也就消防栓由一個球 + 圓通構成,其餘圖形經過 HT 提供的基本 Node 以及 Shape 對象便可搞定:ide
但這並不意味着 API 只能作簡單的模型,《HT for Web 建模手冊》中介紹的 HT 建模插件可讓有想象力的同窗作出各類難以想象的效果。例如這個餐座椅的例子:http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_custommodel.html函數
對於這個餐座椅的例子,特別是一些不規則的花盆、酒杯、聖誕樹和那顆愛心,不少人好奇咱們是怎麼搞出來的。其實蠻簡單,就用了《HT for Web 建模手冊》中的 createRingModel 和 createExtrusionModel 兩個構建模型的函數,其中 createRingModel 顧名思義用來構建圍繞一圈的環狀模型,createExtrusionModel 用來構建基於某個形狀的凸出效果,這兩個函數生成的 3D 模型都是靠平面的 2D 圖形衍生而來,都是靠 HT 系統中構建 2D 不規則多邊形時採用的 Points 和 Segments 兩個數組參數搞定, Points 和 Segments 的意義可參考 《HT for Web 形狀手冊》:工具
可生成不規則的 3D 地板:http://www.hightopo.com/guide/guide/core/shape/examples/example_floor.html學習
可生成不規則的 3D 管線:http://www.hightopo.com/guide/guide/core/shape/examples/example_polyline.htmlui
這樣你們應該理解了原理,但餐座椅的那幾個不規則形狀的 magic 參數是若是得來的呢,這仍是得藉助輔助工具:http://www.hightopo.com/demo/3dmodel/index.html,插件
這個工具多年前爲寫例子隨意搞的,代碼挺簡單你們直接看 http://www.hightopo.com/demo/3dmodel/index.html 源代碼便可,寫的比較簡陋但挺實用,如何導出?打開控制檯,本身打印出 shape 對象的 sements 和 points 參數便可,或等我有空了再來寫個可導入導出更完整的例子,或者 you can you up?3d
其實也不單單也用於 Node 節點類型對象的建模,對於連線其實也能夠用模型來搞定,例如 http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example_forcelayout3.html 這個 3D 彈力拓撲圖例子,不少人已經以爲挺酷炫了,但我一直對這呆板規矩的管道連線很不爽,因而突發奇想搞了個像狗骨頭似的兩頭粗中間細的連線效果,整個 3D 拓撲圖例子一會兒高大上了許多:htm
http://www.hightopo.com/demo/pipeline/index.html
這個例子原理是這樣的,將連線 Edge 設置成透明不可見的,而後針對每一個 Edge 對應一個 Node 節點,這個節點的形狀就是被拉伸並定位到連線位置替代連線來顯示,而 Node 圖形在還沒拉伸以前長得以下:
這裏還有個細節是經過 createMatrix 函數,爲每一個管線設置一個指向兩節點位置的矩陣座標變換參數到 style 的 mat 屬性上,矩陣預算不理解也不要緊,直接照抄例子中代碼便可,爲了方便你們理解我搞了個兩個節點一條連線更簡單的例子供參考:
今天只是拋磚引玉,《HT for Web 建模手冊》中還有衆多 API 函數,只要有想象力還能夠折騰出無數的花樣,後續有空我再借助 HT for Web 的 WebGL 3D 自定義建模功能多搞些實用的例子。