3D可視化應用範圍有多大一看便知！

3D可視化應用範圍有多廣你一定不知道，社群、醫院、電力、校園、安防、消防、糧倉、煤礦、工廠、城市等等，都可以制作可視化場景以便更好應用起來。3D可視化場景制作出來如何讓它“活動起來”？這就需要thingjs線上開發平台的各種互動事件，行走、飛行、跳躍、噴水、下雨等等你能想到的事件都可以通過快捷代碼來實作。最重要的一點，前端工程師一個星期就能活學活用啦~隻要掌握js，了解webgl就可以和實施人員一起搞定3D可視化應用啦！

thingjs物體頂牌.js

var app = new THING.App({

    url: 'https://www.thingjs.com/static/models/storehouse' // 場景位址

});

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

    var car = app.query('car01')[0];

    car.style.color = 'rgb(255,0,0)';

    // 用快捷界面庫 給物體添加UIAnchor

    var uiAnchor = createUIAnchor(car);

    new THING.widget.Button('顯示/隐藏', function () {

        // 顯示/隐藏 uiAnchor

        uiAnchor.visible = !uiAnchor.visible;

    })

})

// 建立UIAnchor

function createUIAnchor(obj) {

    // 建立widget (綁定資料用)

    var panel = new THING.widget.Panel({

        // 設定面闆寬度

        width: '150px',

        // cornerType 角标樣式

        // 沒有角标 none ，沒有線的角标 noline ，折線角标 polyline

        cornerType: 'polyline'

    })

    // 綁定物體身上相應的屬性資料

    panel.addString(obj, 'name').caption('名稱');

    panel.addString(obj.userData, 'power').caption('馬力');

    // 建立UIAnchor面闆

    var uiAnchor = app.create({

        // 類型

        type: 'UIAnchor',

        // 父節點設定

        parent: obj,

        // 要綁定的頁面的 element 對象

        element: panel.domElement,

        // 設定 localPosition 為 [0, 0, 0]

        localPosition: [0, 0, 0],

        // 指定頁面的哪個點放到localPosition位置上(百分比)

        pivot: [-0.2, 1.5]

    });

    return uiAnchor;

}