threejs與cad,threeJs

本文目錄一覽：

• 1、cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係
• 2、three.js vs ThingJS：全景虛擬漫遊技術實現？Javascript 3D開發 前端 物聯網 三維建模 3D模型
• 3、前端dxf文件結構
• 4、three..js在渲染方面支持的怎麼樣

cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係

二者都是基於WebGL技術開發的js庫

Threejs受眾面比較廣，是封裝了webgl的一些底層用法，讓初學者更容易上手；例如繪製一個立方體，使用webgl原生api可能要寫50行代碼，包括構建坐標點，頂點組織、著色器等信息；在threejs裡面可能只要一句代碼就可以構建(實際上也是調用webgl原生api)，只是做了更大粒度的封裝

Cesium受眾面相對較小，是Gis相關的，也是基於WebGL開發的，它主要是三維地球相關的js庫，可以展示二維地圖服務(百度高德)、傾斜攝影模型；還可以在上面做一些三維分析，可以參考

three.js vs ThingJS：全景虛擬漫遊技術實現？Javascript 3D開發 前端 物聯網 三維建模 3D模型

三維建模無非就是通過專業技能加工成立體圖形，使之圖形成為直觀、易懂，容易判讀的立體圖件。對於開發者來說，選擇一個好的3D開發框架，在全景虛擬漫遊場景上實現3D動效，ThingJS vs three.js開發性能和資源投入這裡拿來比較一下，希望對你有幫助。

1~three.js優勢

Three.js是大多數開發者首次接觸的WebGL 3D庫，Threejs庫的出現解決了底層的渲染細節和複雜的數據結構，可以支持如一個房間級別,或一個樓層級別的渲染,或符合特殊要求的大量同類模型的渲染。

2~three.js開發性能

對 WebGL進行了封裝,提供了更高層的渲染介面,提供攝影機、視口的控制,提供場景組織方式,能夠載入多種文件格式,通過創建材質、貼圖並編寫 shader來實現物體效果,創建立方體、球等基本元素,提供燈光、陰影、點雲等等底層功能。

3~three.js劣勢

雖然Three.js底層引擎級別的三維圖形庫，有很多開源庫對它進行擴展，但較為鬆散，適合做輕量級可視化應用，複雜應用則需要基於此庫進行大量封裝才行。尤其場景輸出層面，需要3 3DSMax、Maya、CAD等專業美術人員,通過建模再做一定的導出工作才能得到需要的模型，團隊協作成本高。

4~ThingJS優勢

ThingJS主張3D便捷開發，提供無需3D建模知識即可上手的場景搭建工具和無維護成本的場景存儲雲空間，模型庫提供上萬個行業模型資源。提供ThingJS場景工具組件,包含園區、城市或者圖表搭建,可以讓不具備3D知識的普通用戶搭建3D場景，一個人可以完成物聯網應用的基礎開發。

5~ThingJS開發性能

ThingJS可支撐數十棟建築的園區級應用,可支持從地球到城市、園區、建築、樓層、房間、最終到物聯網設備的渲染性能負載，物聯網可視化效果應用優勢明顯，可創建信息點、線路、管線、區域、熱圖、粒子、動畫等豐富功能，具備靈活的攝影機控制、第一人稱行走、尋路導航和視點線路工具;可擴展的界面、頭頂信息牌、內嵌視頻監控等豐富的信息展示方式。

6~開發者角度的體驗 （three.js vs ThingJS）

如果是你是初學者，three.js用起來更花費時間，就一個載入模型、調光、選擇模型彈框的功能，就能寫出Threejs上百行代碼，ThingJS是更為上層的抽象，不用關心渲染、mesh、光線等複雜概念，更適合項目團隊提高開發效率。

前端dxf文件結構

dxf是autoCad導出的通用看圖文件, 它本質上是一種ascll碼文件,可以使用three-dxf( ) 先將其轉換成json, three-dxf是基於threejs開發的網頁版看圖器, 他將dxf中的圖形轉換成three對象, 再通過一個垂直於y軸的軌道相機實現圖紙移動,縮放功能.

下面我講一講通過three-dxf生成出來的json格式如何解析繪製

這裡, blocks是塊定義, 用於定義組合圖形; header是標題, 記錄了文件的一般信息;

tables定義層與線的信息; tables.layer是圖層信息(名稱, 線型, 線寬, 是否可編輯,透明度等), tables.lineType是線定義(定義連續線,虛線,點劃線等);extents 定義畫幅長寬 , entities是實體,用於繪圖

在extents中定義了原始cad的大小，cad默認左下方為圖形原點,而在前端，canvas以左上方為圖形原點，所以在繪製時，在y軸要做相應的處理。

entities中的常用屬性:

圖形繪製只取決於entities中的定義, 若圖形在entities被定義為簡單圖形(非INSERT),可直接繪製, 若為組合圖形,則需要先在blocks中找到相對應的塊定義,然後再進行遞歸繪製(INSERT有嵌套現象)

下面是一個典型的組合圖形json信息

繪製流程: 我們先在entities的type中發現這是一個INSERT(圖形組合) , 那麼我們找到關鍵繪製參數 position(插入位置), rotation(旋轉角度), name(圖形塊名稱,形狀在blocks中定義)

此處layer名稱為「傢具」，color為256，lineweight為-1，表明繪圖時顏色與線寬跟隨圖層，在tables中的layer屬性中定位到「傢具「圖層，發現線寬line_weight為9，線型line_type為Continuous，圖層顏色為65535，這個顏色是十進位，轉成十六進位顏色為#00FFFF，這樣就完成了繪製前的準備工作.

繪製時，首先定位到blocks中找到A$C22EE24EA欄位，然後在該欄位中遞歸遍歷entities對象，對所有非INSERT屬性進行繪製。注意在繪製時，在blocks中出現的所有坐標都是相對坐標，要與遞歸入口處的絕對坐標position相加才能得到相對於圖紙的坐標。

three..js在渲染方面支持的怎麼樣

Three.js是大多數開發者首次接觸的WebGL 3D庫，Threejs庫的出現解決了底層的渲染細節和複雜的數據結構，可以支持如一個房間級別,或一個樓層級別的渲染,或符合特殊要求的大量同類模型的渲染。

1~開發性能

對 WebGL進行了封裝,提供了更高層的渲染介面,提供攝影機、視口的控制,提供場景組織方式,能夠載入多種文件格式,通過創建材質、貼圖並編寫 shader來實現物體效果,創建立方體、球等基本元素,提供燈光、陰影、點雲等等底層功能。

2~劣勢

雖然Three.js底層引擎級別的三維圖形庫，有很多開源庫對它進行擴展，但較為鬆散，適合做輕量級可視化應用，複雜應用則需要基於此庫進行大量封裝才行。尤其場景輸出層面，需要3 3DSMax、Maya、CAD等專業美術人員,通過建模再做一定的導出工作才能得到需要的模型，團隊協作成本高。

3~three.js和ThingJS 3D框架做對比

ThingJS是新興的3D框架，2018年誕生，由北京優鍩科技公司研發，旨在簡化3D應用開發。輕量化的表現在：1、ThingJS封裝了對模型交互事件的API、對模型的操作及層次關係，一個個具體的模型抽象把初學者從複雜的3D概念中解放出來，2、載入簡單場景僅需1行代碼，發布方式支持iframe, 微信和PC發布，在線化更方便，3、ThingJS是一個完成的物聯網可視化應用開發生態，提供CampusBuilder, CityBuilder等場景搭建SAAS、場景存儲雲空間（無需付費）和10萬個場景資源……

如果是你是初學者，three.js用起來更花費時間，就一個載入模型、調光、選擇模型彈框的功能，就能寫出Threejs上百行代碼，ThingJS是更為上層的抽象，不用關心渲染、mesh、光線等複雜概念，更適合項目團隊提高開發效率。