ThingJS官方示例教程（五）

經過物聯網的實時數據採集，咱們可以辨別物體的運行狀態，ThingJS 3D場景讓管理過程更加直觀，有了身臨其境之感。

一個場景的動畫，在初始界面都會有一個默認視角，這就是攝像機的原始視角，咱們能夠控制它的角度——飛到正前方、頂部俯視、飛到物體左側、飛到物體後上方、飛到物體右上角……從不一樣的角度來近距離接觸3D場景，除此以外，ThingJS還實現了動態切換的操做。

這麼多角度該實現起來有多複雜？如何在一張平面上隨時切換攝影機飛行的角度？一切都無需擔憂，咱們有官方示例和動畫demo，分分鐘實現你想要的效果。

切換場景層級

通常來講，讀取的場景路徑都和模模搭同步，以後在ThingJS平臺開發須要的3D功能。若是要讓場景元素活動起來，而不單單是靜止不動的，就要有一個場景內層級切換動做。

在ThingJS中，註冊了層級切換事件，咱們就可以在點擊物體後，視角進行聚焦，對應到物體並實現「雙擊」建築進入樓層功能。攝像機跟隨着物體活動，在建築內不斷變換視角，達到層次豐富的可視化效果。

ThingJS使用的是JavaScript開發語言，若是把物體當作一個建築體的話，進入層級指的是進入建築；當攝像機飛行到相應物體，等於進入層級。咱們默認進入物體層級時會觸發 EnterLevel 事件。

跟隨物體移動

具體如何實現飛行呢？須要設置一個飛行的動做，並可以經過飛行時長和飛行角度來實現更順暢的到達效果。

飛行到物體的過程當中，ThingJS採用 camera 的 flyTo() 方法，讓攝像機從當前位置，飛行到目標位置，根據效果來增長 time（飛行時間）等參數來控制飛行過程的速度。當攝像機飛行到相應物體以後，將觸發 THING.EventType.LevelFlyEnd 事件，迫使跟隨物體的視角停留，通常來講，物聯網場景都要求視角停留，如停在頂牌、讀取實時數據。

最後，經過ThingJS API接入相對應的物聯網設備，利用飛行結束回調場景對應的終點行爲，一切就能動起來！

代碼示例

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse' // 場景地址
});

//註冊層級切換事件
app.on('load', function (ev) {
    var campus = ev.campus;
    app.level.change(campus);
});

app.on('load', function (ev) {
    var campus = ev.campus;
    app.level.change(campus);

    new THING.widget.Button('全部Thing', function () {
        recover();

        // 自定義進入層級的飛行相應物體
        app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
            // 攝像機飛行到物體
            app.camera.flyTo({
                'object': ev.object,
                'xAngle': 90,
                'yAngle': 0,
                'time': 1 * 1000,
                'complete': function () {
                    console.log('Thing類物體自定義層級飛行結束');
                }
            });
        }, '進入Thing類物體層級自定義層級飛行'); 
// 層級切換飛行結束回調
app.on(THING.EventType.LevelFlyEnd, '*', function (ev) {
    console.clear();
    if (ev.previous) {
        console.log('上一層級:' + ev.previous.name)
    }
    console.log('[' + ev.object.name + '] 物體層級飛行結束');
});

有了場景，還要定位目標物體，這一切都須要移動。ThingJS僅僅用一個攝像機功能就能輕鬆實現，開發人員不到一週就能夠門兒清，可開發本身的商業項目了！