ThingJS:如何实现“飞到物体”的移动效果?

时间:2020-7-29 作者:admin

物联网的场景搭建完毕之后,就要进行实时展示,往往会有一个眼睛跟随物体移动的过程贯穿始终。如何实现这一移动效果?ThingJS找到了不下6种实现方式。

一个场景的动画,在初始界面都会有一个默认视角,这就是摄像机的原始视角,我们可以控制它的角度——飞到正前方、顶部俯视、飞到物体左侧、飞到物体后上方、飞到物体右上角……从不同的角度来近距离接触3D场景,除此之外,ThingJS还实现了动态切换的操作。

这么多角度该实现起来有多复杂?如何在一张平面上随时切换摄影机飞行的角度?一切都无需担心,我们有官方示例和动画demo,分分钟实现你想要的效果。

ThingJS:如何实现“飞到物体”的移动效果?

切换场景层级

一般来说,读取的场景路径都和模模搭同步,之后在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带你实现“飞到物体”的移动效果。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。