基于WebGL的3D技術(shù)在網(wǎng)頁中的運(yùn)用 ThingJS 前端開發(fā)

時(shí)間：2023-07-24 08:57:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-24 08:57:02 來源：網(wǎng)站運(yùn)營

基于WebGL的3D技術(shù)在網(wǎng)頁中的運(yùn)用 ThingJS 前端開發(fā)：Three.js、ThingJS這些引擎庫可以加載3D制作軟件的模型，大幅度提高了制作效率，改變WebGL開發(fā)困難的局面，讓W(xué)eb開發(fā)者享受便捷的3D開發(fā)服務(wù)。三者的難度對比如下：

ThingJS（框架）< Three.js（引擎）< WebGL（接口）

3D繪圖標(biāo)準(zhǔn) - WebGL

WebGL是一種3D繪圖標(biāo)準(zhǔn)，通過結(jié)合Javascript和OpenGL ES 2.0，可以為HTML5的Canvas標(biāo)簽提供硬件3D加速渲染，這樣Web開發(fā)人員可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場景和模型。利用WebGL進(jìn)行繪圖的流程如下所示：

由此得知，原生 WebGL進(jìn)行3D網(wǎng)頁制作，其過程非常繁瑣，開發(fā)難度很多，所使用的開發(fā)概念非常底層，嚴(yán)重影響WebGL的開發(fā)效率。因此，很多3D圖形引擎庫應(yīng)運(yùn)而生，直接使用Javascript腳本語言開發(fā)，將WebGL進(jìn)行不同程度的封裝，例如“three js“、“scenceJS”、“Oak3d”和“simjs”等，這些引擎庫能夠讓用戶更加方便地進(jìn)行3D圖形繪制和動(dòng)畫的制作。

3D圖形引擎庫 - Three.js

以Three.js為例，繪圖的流程如下所示：

threejs是基于WebGL的 3D Javascript庫，它封裝了場景、相機(jī)、幾何、3D模型加載器、燈光、材質(zhì)、著色器、動(dòng)畫、粒子、數(shù)學(xué)工具等。這樣的封裝讓用戶能夠更加直觀的在網(wǎng)頁中制作3D圖形和動(dòng)畫。就像是搭樂高一樣輕松。

在 threejs中場景、相機(jī)和渲染器是3D圖形繪制的基礎(chǔ)：場景是所有對象放置和展示的平臺；相機(jī)決定圖形展示的角度；渲染器決定了渲染的結(jié)果應(yīng)該畫在頁面的什么元素上面，并且以怎樣的方式來繪制。以下代碼給出了圖形繪制的具體過程，如果3D模型很復(fù)雜，可以在專門的3D繪圖軟件中進(jìn)行繪制，然后由 three. js加載圖形:

//創(chuàng)建場景 var scene =new THREE.Scene(）;//創(chuàng)建相機(jī) var camera =new THREE. PerspectiveCamera(75, window.inner Width/window. innerHeight,0.1,1000)；//創(chuàng)建渲染器 var renderer= new THREE. WebGLRenderer（）; renderer.setSize( window.innerWidth, window. innerHeight ) ；document. body.appendChild( renderer. domElement）；//繪制立方體 var geometry =new THREE. BoxGeometry( 1, 1, 1);//給立方體貼材質(zhì) 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年誕生，是針對物聯(lián)網(wǎng)可視化領(lǐng)域的JavaScript 3D Library，旨在簡化3D應(yīng)用開發(fā)效率，它封裝了3D源碼，提供完整的物聯(lián)網(wǎng)開發(fā)概念（建筑、樓層、房間、物、標(biāo)牌、線路、區(qū)域、熱圖、事件、查詢、地圖、全景圖），利用可視化開發(fā)組件在線開發(fā)（CampusBuilder【客戶端下載】+ThingJS），繪圖的流程如下所示：

ThingJS封裝了對模型交互事件的API、對模型的操作及層次關(guān)系，一個(gè)個(gè)具體的模型抽象把初學(xué)者從復(fù)雜的3D概念中解放出來。例如常見的智慧建筑，ThingJS 平臺使用Javascript調(diào)用封裝好的概念進(jìn)行開發(fā)，比three.js更為頂層，不用關(guān)心渲染、mesh、光線等復(fù)雜概念，具備一年的javascript基礎(chǔ)即可開發(fā)3D項(xiàng)目。

較之于引擎層、接口層，3D框架無疑是更為輕松的開發(fā)方式！ThingJS不斷簡化3D項(xiàng)目開發(fā)流程，不久的將來，3D技術(shù)將會在物聯(lián)網(wǎng)領(lǐng)域越來越普及。登錄【資源中心】查看demo。