基於WebGL的3D技術在網頁中的運用 ThingJS 前端開發

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爲例，繪圖的流程以下所示：

Three.js是基於WebGL的 3D Javascript庫，它封裝了場景、相機、幾何、3D模型加載器、燈光、材質、着色器、動畫、粒子、數學工具等。這樣的封裝讓用戶可以更加直觀的在網頁中製做3D圖形和動畫。就像是搭樂高同樣輕鬆。

在Three.js中場景、相機和渲染器是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項目。

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'     // 場景地址
});
app.on('load', function (ev) {
    // 場景加載完成後 進入園區層級
    app.level.change(ev.campus);
});
// 監聽建築層級的 EnterLevel 事件
app.on(THING.EventType.EnterLevel, ".Building", function (ev) {
    // 當前進入的層級對象
    var current = ev.current;
    // 上一層級對象
    var preObject = ev.previous;
    // 若是當前層級對象的父親是上一層級對象（即正向進入）
    if (current.parent === preObject) {
        console.log("從 " + preObject.type + " 進入了 " + current.type);
    }
    else {
        console.log("進入 " + current.type + "（從 " + preObject.type + " 退出）");
    }
});
// 監聽建築層級的 LeaveLevel 事件
app.on(THING.EventType.LeaveLevel, ".Building", function (ev) {
    // 要進入的層級對象
    var current = ev.current;
    // 上一層級對象（退出的層級）
    var preObject = ev.previous;
    if (current.parent === preObject) {
        console.log("退出 " + preObject.type + " 進入 " + current.type);
    }
    else {
        console.log("退出 " + preObject.type + " ，返回 " + current.type);
    }
})

較之於引擎層、接口層，3D框架無疑是更爲輕鬆的開發方式！ThingJS不斷簡化3D項目開發流程，不久的未來，3D技術將會在物聯網領域愈來愈普及。登陸【資源中心】查看demo。