若ThingJS 3D开发与真实世界的设备相关联,获取场景发送的设备属性数据,就能够真正实现物联网的控制操作。三维数据可视化分析,离不开场景搭建,通过对设备或楼层的仿真模拟,并且利用进出层级和聚焦物体等控制方法,在智能安防或培训层面做到更加直观、有效。
ThingJS使用app.level.change(ev.campus);这个进出层级、聚焦物体的代码来注册进出层级事件,该事件可以实现楼层的进出,有自定义属性或是ID属性物体的双击聚焦功能。
ThingJS 3D开发如何实现进出层级?超简单!
今天我们来详细介绍一下ThingJS中关于层级切换的一些注册事件,以及如何去控制层级切换!
ThingJS层级切换启用与暂停
在ThingJS在线开发注册进出层级事件是很简单的,如下方代码所示,但是我们又该如何在层级发生变化的时候去添加对应的逻辑代码呢?
其实也不难,使用ThingJS中的层级监听事件THING.EventType.EnterLevel以及THING.EventType.LeaveLevel,即可在进出层级的时候去写我们的控制代码了!
代码示例 ①
app.on('load', function (ev) {
// 场景加载完成后 进入园区层级
app.level.change(ev.campus);
});
完整的进出层级监听事件如下。
代码示例 ②
/**
* 说明:以建筑(Building)层级为例,说明进出层级事件 及其 方向性
* 操作:
* 左键双击建筑 进入建筑层级;此时触发了进入建筑事件
* 进入建筑后再左键双击 进入楼层;此时触发了退出建筑事件
* 进入楼层后右键单击 返回建筑;此时触发了进入建筑事件
* 返回建筑后 右键单击 返回园区;此时触发了退出建筑事件
* 教程:ThingJS教程——>园区与层级——>【进阶】场景层级事件
* 难度:★★★☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
});
app.on('load', function (ev) {
// 场景加载完成后 进入园区层级
app.level.change(ev.campus);
});
// 监听建筑层级的 EnterLevel 事件
app.on(THING.EventType.EnterLevel, ".Building", function (ev) {
// 当前进入的层级对象
var current = ev.current;
// 上一层级对象
var preObject = ev.previous;
// 如果当前层级对象的父亲是上一层级对象(即正向进入)
if (current.parent === preObject) {
console.log("从 " + preObject.type + " 进入了 " + current.type);
}
else {
console.log("进入 " + current.type + "(从 " + preObject.type + " 退出)");
}
});
// 监听建筑层级的 LeaveLevel 事件
app.on(THING.EventType.LeaveLevel, ".Building", function (ev) {
// 要进入的层级对象
var current = ev.current;
// 上一层级对象(退出的层级)
var preObject = ev.previous;
if (current.parent === preObject) {
console.log("退出 " + preObject.type + " 进入 " + current.type);
}
else {
console.log("退出 " + preObject.type + " ,返回 " + current.type);
}
})
以上仅作为一个基础版本的进出层级监控输出,如果是需要在进出层级的时候添加事件,则需要在我们的EnterLevel事件、LeaveLevel 事件中添加对应的功能事件代码,比如后续的添加物体2D顶牌或者3D Marker标记,更多详情可以登陆ThingJS官方论坛查看更多。
同样,针对进出园区层级控制,我们也能重新注册园区事件以及暂停园区事件。
代码示例 ③
/**
* 说明:以建筑(Building)层级为例,说明进出层级事件 及其 方向性
* 操作:
* 左键双击建筑 进入建筑层级;此时触发了进入建筑事件
* 进入建筑后再左键双击 进入楼层;此时触发了退出建筑事件
* 进入楼层后右键单击 返回建筑;此时触发了进入建筑事件
* 返回建筑后 右键单击 返回园区;此时触发了退出建筑事件
* 教程:ThingJS教程——>园区与层级——>【进阶】场景层级事件
* 难度:★★★☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
});
app.on('load', function (ev) {
new THING.widget.Button('开', queryByOpen);
new THING.widget.Button('关', queryByClose);
// 场景加载完成后 进入园区层级
app.level.change(ev.campus);
});
function queryByOpen() {
// 开启系统内置的左键双击进入下一层级操作
app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
// 开启系统内置的右键单击返回上一层级操作
app.resumeEvent(THING.EventType.Click, null, THING.EventTag.LevelBackOperation);
// 开启进入物体层级默认操作行为
app.resumeEvent(THING.EventType.LeaveLevel, '.Thing', THING.EventTag.LevelSceneOperations);
// 开启退出物体层级默认操作行为
app.resumeEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
}
function queryByClose() {
// 暂停系统内置的左键双击进入下一层级操作
app.pauseEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
// 暂停系统内置的右键单击返回上一层级操作
app.pauseEvent(THING.EventType.Click, null, THING.EventTag.LevelBackOperation);
// 暂停进入物体层级默认操作行为
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
// 暂停退出物体层级默认操作行为
app.pauseEvent(THING.EventType.LeaveLevel, '.Thing', THING.EventTag.LevelSceneOperations);
}
以上就是ThingJS平台针对层级控制的逻辑实现方法,总结来说就是这三个简单的代码块:
注册进出层级事件
进出层级监听事件
注册及暂停园区事件
功夫不负有心人,只要利用ThingJS代码示例就能够让场景动起来,让你体验不一样的3D乐趣!