#三維可視化##3D開發#
ThingJS編輯界面布局3D建模與場景搭建方法交互控制腳本開發關鍵點
ThingJS平臺基於 Web GL中的3D框架進行3D開發,界面設計採用HTML5,系統腳本採用 JavaScript。完整的平臺系統包含七大模塊:3D場景搭建、模型操作、模型導入、模型導出、場景渲染、壓縮與解壓、信息存儲與顯示。
各模塊獨立又緊密聯繫,核心的核心主要是3D建模與場景搭建、交互控制開發,ThingJS本著加速3D項目開發的原則,做了間接的封裝,擁有自己的平臺特色。
平臺只有一個主界面,分為三個區域:在線開發工具欄、3D編輯器及3D場景渲染區域。場景渲染區域為用於實時渲染整個場景的3D數據,同時用戶也可以在這上面進行滑鼠交互操作,例如縮放、旋轉、平移等;在線開發工具欄區域提供官方示例及用戶創建並保存的項目;3D編輯器區域展示了打開的項目或文件的內容,包含對象列表、幾何信息、材質信息等,同時,用戶可以通過編輯修改這些信息來改變對象的材質或屬性等。
3D場景所需要的基本要素包括渲染器、場景、相機、燈光、物體,ThingJS 3D引擎都已經封裝成js庫,不需要再造輪子,當然,缺少其中某一樣都不能構成一個完整的3D場景。
下面就來談談3D場景創建、腳本開發構建的過程,分成3D建模、交互控制兩部分。
1. 3D建模與場景搭建
渲染方式ThingJS平臺提供兩種渲染方式,即 WebGLRenderer及 CanvasRenderer。兩者的渲染比較,從圖中可以看出 WebGLRendere的3D渲染效果更真實生動,可以充分表現場景的細節與材質特性,但它對硬體性能和顯卡有要求。相反地,CanvasRenderer則具有更好的兼容性,且沒有鋸齒,能夠適用於更多的設備。
很顯然,如果你的設備支持 WebGL,那麼 WebGLRenderer渲染器具有比 Canvas Renderer更好的性能。ThingJS支持用Canvas進行2D面板內的貼圖繪製。在合理範圍內選擇高效率、低成本的實現方案,這是平臺宗旨。
基礎幾何體有了場景,我們就可以添加物體對象了。ThingJS 3D引擎提供多種基礎幾何體對象,供用戶選擇創建於場景中,包括平面、圓形、立方體、圓柱體、球體、多面體等,如圖所示。直接JavaScript調用代碼創建,用戶可以通過修改其參數來改變幾何體的形狀,物體參數可分為通用參數、特定物體類型(type)的專屬參數、系統其他功能。列表如下:
(1)通用參數
type:該物體用什麼物體類來創建
id:該物體的編號
name:物體的名字
position:設置世界位置
localPosition:設置在父物體下的相對位置,和 position 只能輸入一個
angles:設置世界坐標系下三軸旋轉角度,例如:angles:[90,45,90] ,代表在世界坐標系下物體沿X軸旋轉90度,沿Y軸旋轉45度,沿Z軸旋轉90度
scale:設置相對自身坐標系下的縮放比例
parent:設置父物體是誰
(2)特定物體類型(type)的專屬參數
url :物體模型資源路徑,這個是 「Thing」 物體需要的參數
(3)系統其他功能
complete:初始化完成後的函數回調
外部模型使用ThingJS創建常見幾何體是十分方便的,非常複雜的模型會用3DSMAX軟體製作。
ThingJS允許用戶導入由3DMax、 blender等工具製作的三維模型,並在CampusBuilder裡添加到場景中。支持導入的格式包括:obj、mtl、dae、.wrl、vtk、stl等【官方文件格式列表】。ThingJS導入外部模型文件需要3D插件,官網資源中心提供下載。
材質設置有些精模在3DSMAX製作,加載的時候不帶材質,那是因為沒有同步加載模型的材質文件,從3DSMAX中導出模型的材質文件port.mtl即可。
在ThingJS中,模型材質創建與定義可以有兩種方式,一種是在建模軟體繪製好材質然後導出材質文件,利用CampusBuilder搭建3D場景,直接在建築外立面添加貼圖,自動生成材質的參數,截圖如下。
另一種是在模型導入場景之後通過代碼創建或設置材質。平臺內直接JavaScript調用3D源碼,引入圖片URL進行貼圖。
2. 交互控制腳本開發
虛擬漫遊ThingJS中提供了多種用於漫遊的控制器,包括Track BallControls、 FlyControls RollControls、 OrbitControls、 FirstPersonContro、 PathControls。
FirstPersonControls (第一人稱控制項) 常用於物聯網3D可視化領域的漫遊場景。它的行為類似於第一人稱射擊遊戲中的相機,用鍵盤移動或用滑鼠轉動,
對象拾取3D場景的一個重要的用戶交互技術是對象拾取,即3D場景中的對象選擇。
一般系統的輸入設備是一個2D滑鼠。用戶實際單擊的是在其中渲染3D場景的畫布。因為當用戶圍繞場景運動時,渲染會發生變化,必須將滑鼠的2D坐標在單擊時動態地映射到場景的三維坐標空間,以確定哪些對象被選中。
ThingJS的拾取分兩種操作方式,一是通過屬性和接口獲取滑鼠拾取(Pick)的物體,當滑鼠在一個物體上懸停時,我們經常希望做一些操作,比如變色等。可以使用 Picker 類來獲取滑鼠拾取(Pick)的物體,通過 app.picker 得到 Picker 類來實現這個功能;二是通過事件獲取滑鼠拾取的物體。可以通過 MouseEnter 和 MouseLeave 來實現 。
平移、旋轉與縮放在三維空間坐標中,對象的平移變換是最簡單的變換,其變換原理是在初始位置點坐標基礎上加上一個平移的向量;相對而言,對象的旋轉變換比較複雜,其變換原理是變換後點坐標等於初始位置點坐標乘以一個變換矩陣,繞指定的任意軸旋轉變換就是由幾個繞坐標軸旋轉變換和平移變換效果疊加而成的。同樣的,對象的縮放變換的原理為初始位置點坐標乘以一個變換矩陣。
在ThingJS中,控制對象的平移、旋轉及縮放是比較容易實現的,分別對應translate, rotation, scale這三個屬性。 ThingJS中封裝了一個工具類,可以直接用來進行平移、旋轉和縮放操作。
官網註冊獲取 3D demo