webgl、Javascript、HTML、ThingJS、threejs、cesium、BIM都是什麼鬼？

全部這些名詞都源於你要作可視化應用，若是不是請繞行。不是搞技術的朋友念一念就行了，搞技術開發的你得好好念。

webgl——是一種3D繪圖協議，這種繪圖技術標準容許把JavaScript和OpenGL ES 2.0結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，WebGL能夠爲HTML5。Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了，還能建立複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜3D結構的網站頁面，甚至能夠用來設計3D網頁遊戲等等。

Javascript——(簡稱「JS」) 是一種具備函數優先的輕量級，解釋型或即時編譯型的編程語言。雖然它是做爲開發Web頁面的腳本語言而出名的，可是它也被用到了不少非瀏覽器環境中，JavaScript基於原型編程、多範式的動態腳本語言，而且支持面向對象、命令式和聲明式(如函數式編程)風格。

HTML——HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤.經過這些標籤能夠將網絡上的文檔格式統一，使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字，圖形、動畫、聲音、表格、連接等。

ThingJS——ThingJS 是物聯網可視化PaaS開發平臺，幫助物聯網開發商輕鬆集成 3D 可視化界面。ThingJS 名稱源於 物聯網Internet of 。Things (IoT)中的 Thing (物)，ThingJS 使用當今最熱門的 Javascript語言進行開發。不只能夠針對單棟或多棟建築組成的園區場景進行可視化開發，搭載豐富插件後，也能夠針對地圖級別場景進行開發。普遍應用於數據中心、倉儲、學校、醫院、安防、預案等多種領域。物聯網分爲感知層、網絡層、應用層。應用層涉及到 3D 界面的開發，對大部分企業來講都有必定挑戰。ThingJS 能夠極大下降 3D界面開發的成本。

cesium——CesiumJS is an open source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality,and ease of use. Developers across industries, from aerospace to smart cities todrones, use CesiumJS to create interactive web apps for sharing dynamicgeospatial data.Built on open formats, CesiumJS is designed for robust interoperability.Bring in data from Cesium ion or from some other source, visualize withCesiumJS, and share with users on desktop or mobile. With more than 500,000downloads, CesiumJS powers apps that reach millions of users.

以上給你們解釋的是否清楚了？3D開發技術人員必定不陌生，但對於前端工程師來講還須要再瞭解一下，再深刻一下晉級3D開發工程師又進一步啦！

拖拽事件js

/**

* 說明：拖拽物體

* 操做：

* 開啓拖拽後，鼠標左鍵拖拽物體

* 關閉拖拽後，物體不可拖拽

* 難度：★★☆☆☆

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse'

});

app.on('load', function () {

// 獲取全部 Thing 物體

var objs = app.query('.Thing');

new THING.widget.Button('開啓拖拽', function () {

// 設置物體可拖拽（默認物體不可拖拽）

objs.draggable = true;

// 設置勾邊顏色

objs.style.outlineColor = '#ff0000';

});

new THING.widget.Button('關閉拖拽', function () {

objs.draggable = false;

objs.style.outlineColor = null;

})

// 監聽拖拽相關事件

// 開始拖拽

objs.on('dragstart', function (ev) {

console.log('開始拖拽')

var obj = ev.object;

obj.style.color = '#ff0000';

});

// 拖拽中

objs.on('drag', function (ev) {

if (ev.picked) {

console.log(ev.pickedPosition);

}

});

// 結束拖拽

objs.on('dragend', function (ev) {

console.log('結束拖拽')

var obj = ev.object;

obj.style.color = null;

});

})