ThingJS研究發現,很多廠家采取了偽三維效果(序列照片旋轉),來臨時代替三維模型的展示,可見3D商業項目是多么有價值!
基于WebGL周邊衍生了眾多的第三方庫,其中Three.js屬于開發應用,做了一定的渲染細節封裝,ThingJS則封裝更多對模型的操作,力求讓更多無3D開發經驗的人員上手。以Unity 3D為代表的OpenGL出現更早,開發者可以在Unity 3D平臺上構建各種AR和VR互動體驗,同時可以發布WebGL版本。下面基于開發體驗、場景資源和用戶技能等三大維度比較這三款3D框架。
Three.js
目前最流行的開源3D框架,2009年4月誕生,2005年adobe收購了macromedia的flash產品,2008,2009年正是flash如日中天之時,threejs也識時務的選擇了flash的ActionScript平臺,后來flash沒落之后選擇了WebGL。
ThingJS
新興的3D框架,2018年誕生,是針對物聯網領域的JavaScript 3D Library。它是由在3D領域經營多年的優锘科技公司研發,旨在簡化3D應用開發。
Unity3D
Unity是游戲引擎開發商,為游戲開發、美術、建筑、汽車設計、影視制作在內的創作者提供一整套軟件解決方案,可用于創作、運營和變現實時互動的2D/3D內容。 2020年5月9日,Unity宣布收購加拿大技術服務公司Finger Food,拓展工業應用版圖,在建筑設計、工程、施工等領域擴展。
開發體驗對比
Three.js是大多數開發者首次接觸的WebGL 3D庫,Threejs庫的出現解決了底層的渲染細節和復雜的數據結構,終于將復雜的底層細節抽象出來。但對于初學者來說需要花費很多時間,就一個加載模型、調光、選擇模型彈框的功能,就能寫出Threejs上百行代碼。
ThingJS是更為上層的抽象,不用關心渲染、mesh、光線等復雜概念。ThingJS封裝了對模型交互事件的API、對模型的操作及層次關系,一個個具體的模型抽象把初學者從復雜的3D概念中解放出來。
Unity 3D需要下載和安裝Unity編輯器以便創建3D項目,不同于Web前端開發JS語言,C#語言面向對象的特性完整,有利于程序設計。只是相對來說,C#語言學習成本更高。Unity 3D發布操作流程不夠簡潔,跨平臺發布需要數小時不等。
場景資源對比
ThingJS考慮3D項目開發的便捷性,提供無需3D建模知識即可上手的場景搭建工具和無維護成本的場景存儲云空間,模型庫提供上萬個行業模型資源。
Three.js和Unity 3D沒有提供場景解決方案和模型庫,需要團隊手動維護,對于模型導出和加載有很高的要求。
用戶技能要求對比
ThingJS在線開發具備JS基礎即可,不需要3D開發技能,入門時間僅數小時。
ThreeJS則需要學習很多復雜的3D概念,初學者上手需要花數周或更長時間,尤其需要專業美術人員完成建模和導出工作,團隊協作成本高。
Unity 3D開發者需要有C#語言基礎,具備3D開發專業知識,需要至少一周時間入門開發。
結論
ThingJS主要優勢在于入門簡單、發布迅速,功能和設計更接近行業應用的需求,面向非專業3D用戶提供的工具與資源,更適合物聯網可視化應用。
Three.js底層引擎級別的三維圖形庫,有很多開源庫對它進行擴展,但較為松散,適合做輕量級可視化應用,復雜應用則需要基于此庫進行大量封裝才行。
Unity 3D優勢在于游戲開發,有很好的生態,性能效果都有很好表現,但輸出結果較封閉,適合做最終用戶的產品,不適合基于此做web上的二次開發。
為了體驗3D便捷開發,我們再來看下ThingJS的模型加載示例。
````var app = new THING.App({
container: 'div3d',
url:'https://speech.uinnova.com/static/models/building'
});
只關注場景在頁面的div的id和場景存放的地址,所有的細節ThingJS都處理好了。場景加載完之后便可從場景獲得加載內容,并進行交互應用開發。夠簡單!
// 獲取建筑對象
var building = app.buildings[0];
// 打印建筑中所有的樓層
building.floors.forEach(function(floor) {
???console.log('Floor: ' + floor.id);
});
// 獲取室外對象
var outdoors = app.outdoors;
// 打印室外所有物體
outdoors.things.forEach(function(thing) {
???console.log('Thing: ' + thing.id);
});
ThingJS讓開發者不到一周入門上手3D開發!