ThingJS和Threejs3D可視化框架比較

WebGL是由HTML五、JavaScript、OpenGLES2.0組成的一個網頁版3D圖形，OpenGL是比較經常使用的跨平臺圖形庫，它支持了一項很是重要的特性，便可編程着色器方法，開發起來相對簡單。可是，因爲須要圖形學基礎，涵蓋過多渲染等細節，開發量明顯增多，怎麼辦呢？

下面就基於WebGL技術探討一下如今的兩款3D框架。

Threejs (threejs.org/)
目前最流行的開源3D框架，2009年4月誕生，2005年adobe收購了macromedia的flash產品，2008，2009年正是flash如日中天之時,threejs也識時務的選擇了flash的ActionScript平臺，後來flash沒落以後選擇了WebGL。

ThingJS (thingjs.com/)
新興的3D框架，2018年誕生，是針對物聯網領域的JavaScript 3D Library。它是由在3D領域經營多年的優鍩科技公司研發，旨在簡化3D應用開發。

設計角度

WebGL能夠處理3D圖像，聽起來是很是高興的一件事，可是WebGL實在是太底層了，WebGl解決是如何再畫布上畫圖的問題，怎麼畫點，線，面，怎麼上色，怎麼貼圖，怎麼處理光線，視角轉動以後怎麼換算繪製等等。這些對於一個作3D應用的開發者來講要學的東西太多了。

Threejs庫的出現解決了底層的渲染細節和複雜的數據結構，終於將複雜的底層細節抽象出來，使得你們開發3D應用更容易了一些。和不少開發者交流threejs都是他們首次接觸的WebGL 3D庫，並能很容易的就能開始作一些實驗。可是使用Threejs開發應用仍是門檻很高，但就一個加載模型，調光，選擇模型彈框的功能，就能寫出Threejs上百行代碼。同時還有不少複雜的3D概念須要理解。這時就須要ThingJS了。

ThingJS是更爲上層的抽象，不用關心渲染，mesh，光線等複雜概念。它抽象是一個個具體的模型，ThingJS封裝了對模型交互事件的各類API，好比單擊，左鍵，鼠標滑過等，ThingJS封裝了對模型的操做，例如移動，放大縮小，上色，勾邊，甚至開門，ThingJS還封裝了模型的層次關係，例如物體是放在某個房間裏的，房間又在某個樓層，樓層又是某個大樓的。大樓在園區裏。

編碼對比

這裏僅僅從3D模型加載這個小點進行對比說明。更多內容你們可參考各自的網站www.three.org 和 www.thingjs.com進行詳細對比。
three的模型加載

function load3DModel(){
   /
     一、collada是一種基於XML的3D模型交互方案，簡單來講，就是一種3D模型能夠經過collada轉換成另外一種3D模型，
     從而，各類3D模型均可以經過collada轉換成web支持的3D模型。
     二、。dae是一個鐘3D模型的格式
     三、加載時注意瀏覽器同源策略的限制
    /
   var loader = new THREE.ColladaLoader();
   loader.load( "./model/avatar.dae", function ( collada ) {
      //找到模型中須要的對象。將相機看向這個對象是爲了讓這個對象顯示在屏幕中心
      collada.scene.traverse( function ( child ) {
         if ( child instanceof THREE.SkinnedMesh ) {
            modelObj = child;
            camera.lookAt( child.position );
         }
      } );
      //將模型的場景加入到總體的場景
       modelObj.material.opacity = 0.8;
      scene.add( collada.scene ); //每一個模型都要添加到場景

      //顯示出模型的骨骼的代碼,不須要可刪去
      var helper = new THREE.SkeletonHelper( modelObj );
      helper.material.linewidth = 3;
      scene.add( helper );
   } );
}

複製代碼threejs 加載模型到場景每一個細節都得本身處理。
咱們再來看下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);
});

多麼完美的封裝方式。

three.js(www.three.org)和ThingJS(www.thingjs.com)都是JavaScript 3D Library，都對webGL的3D處理能力進行了封裝，可是three.js 更偏三維技術底層，適用於3D愛好者學習3D技術；ThingJS更偏物聯網應用功能開發，重在開發效率，下降開發成本，適合於使用3D技術作項目的開發者，只要學會JavaScript代碼便可上手。

作商業項目，快速上手開發技術是很重要的，不該該成爲一種很高門檻的技能，ThingJS深入探索到了這一痛點，基於將來蓬勃發展的物聯網可視化場景，僅需JS代碼就可進行3D開發，歡迎無償使用水印版！