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。

總結

以上是生活随笔為你收集整理的three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。