ThingJS：摄像机飞行功能示例，让你节省3D项目沟通成本

ThingJS是基于WebGL的3D开发框架，仅使用JavaScript开发语言，基于浏览器就可以完成小小的3D场景开发，不仅开发步骤简化了，效果样式也是常见的，让业务沟通变得简单。

进行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的3D框架让三维场景沟通成本更低，不妨试一试。