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;
    });
})