Three.js、ThingJS這些引擎庫可以加載3D制作軟體的模型，大幅度提高了制作效率，改變WebGL開發困難的局面，讓Web開發者享受便捷的3D開發服務。三者的難度對比如下：
ThingJS（架構）< Three.js（引擎）< WebGL（接口）
3D繪圖示準 - WebGL
WebGL是一種3D繪圖示準，通過結合Javascript和OpenGL ES 2.0，可以為HTML5的Canvas标簽提供硬體3D加速渲染，這樣Web開發人員可以借助系統顯示卡在浏覽器裡更流暢地展示3D場景和模型。利用WebGL進行繪圖的流程如下所示：
由此得知，原生 WebGL進行3D網頁制作，其過程非常繁瑣，開發難度很多，所使用的開發概念非常底層，嚴重影響WebGL的開發效率。是以，很多3D圖形引擎庫應運而生，直接使用Javascript腳本語言開發，将WebGL進行不同程度的封裝，例如“three js“、“scenceJS”、“Oak3d”和“simjs”等，這些引擎庫能夠讓使用者更加友善地進行3D圖形繪制和動畫的制作。
3D圖形引擎庫 - Three.js
以Three.js為例，繪圖的流程如下所示：
threejs是基于WebGL的 3D Javascript庫，它封裝了場景、相機、幾何、3D模型加載器、燈光、材質、着色器、動畫、粒子、數學工具等。這樣的封裝讓使用者能夠更加直覺的在網頁中制作3D圖形和動畫。就像是搭樂高一樣輕松。
在 threejs中場景、相機和渲染器是3D圖形繪制的基礎：場景是所有對象放置和展示的平台；相機決定圖形展示的角度；渲染器決定了渲染的結果應該畫在頁面的什麼元素上面，并且以怎樣的方式來繪制。以下代碼給出了圖形繪制的具體過程，如果3D模型很複雜，可以在專門的3D繪圖軟體中進行繪制，然後由 three. js加載圖形:
var scene =new THREE.Scene(）;
//建立相機
var camera =new THREE. PerspectiveCamera(75, window.inner Width/window. innerHeight,0.1,1000)；
//建立渲染器
var renderer= new THREE. WebGLRenderer（）; renderer.setSize( window.innerWidth, window. innerHeight ) ；
document. body.appendChild( renderer. domElement）；
//繪制立方體
var geometry =new THREE. BoxGeometry( 1, 1, 1);
//給立方體貼材質
var material =new THREE. MeshBasicMaterial （{color: 0x00ff00} )；
var cube=new THREE. Mesh( geometry, material);
//将立方體放在場景中
scene.add(cube);
camera.position.z=5;
//渲染
renderer. render( scene, camera） 基于WebGL的3D架構 - ThingJS
ThingJS是新興的3D架構，2018年誕生，是針對物聯網可視化領域的JavaScript 3D Library，旨在簡化3D應用開發效率，它封裝了3D源碼，提供完整的物聯網開發概念（建築、樓層、房間、物、标牌、線路、區域、熱圖、事件、查詢、地圖、全景圖），利用可視化開發元件線上開發（CampusBuilder【
用戶端下載下傳】+
ThingJS），繪圖的流程如下所示：
ThingJS封裝了對模型互動事件的API、對模型的操作及層次關系，一個個具體的模型抽象把初學者從複雜的3D概念中解放出來。例如常見的智慧建築，ThingJS 平台使用Javascript調用封裝好的概念進行開發，比three.js更為頂層，不用關心渲染、mesh、光線等複雜概念，具備一年的javascript基礎即可開發3D項目。
較之于引擎層、接口層，3D架構無疑是更為輕松的開發方式！ThingJS不斷簡化3D項目開發流程，不久的将來，3D技術将會在物聯網領域越來越普及。登入【
資源中心】檢視demo。