关于javascript:ThingJS如何实现飞到物体的移动效果

50次阅读

共计 1621 个字符，预计需要花费 5 分钟才能阅读完成。

物联网的场景搭建结束之后，就要进行实时展现，往往会有一个眼睛追随物体挪动的过程贯通始终。如何实现这一挪动成果？ThingJS 找到了不下 6 种实现形式。

一个场景的动画，在初始界面都会有一个默认视角，这就是摄像机的原始视角，咱们能够管制它的角度——飞到正前方、顶部仰视、飞到物体左侧、飞到物体后上方、飞到物体右上角……从不同的角度来近距离接触 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 带你实现“飞到物体”的挪动成果。

正文完