#三維可視化##3D開發#
-
ThingJS編輯界面佈局
-
3D建模與場景搭建方法
-
交互控制腳本開發關鍵點
ThingJS平臺
基於 Web GL中的3D框架進行3D開發，界面設計採用HTML5，系統腳本採用 JavaScript。完整的平臺系統包含七大模塊：
3D場景搭建、模型操做、模型導入、模型導出、場景渲染、壓縮與解壓、信息存儲與顯示。
各模塊獨立又緊密聯繫，核心的核心主要是3D建模與場景搭建、交互控制開發，ThingJS本着加速3D項目開發的原則，作了間接的封裝，擁有本身的平臺特點。
ThingJS編輯界面佈局
平臺只有一個主界面，分爲三個區域：
在線開發工具欄、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中封裝了一個工具類，能夠直接用來進行平移、旋轉和縮放操做。