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。