ThingJS 3D场景层级切换，体验不一样的动感！

若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乐趣！

ThingJS 3D场景层级切换，体验不一样的动感！相关推荐

基于WebGL架构的3D可视化ThingJS平台—粮仓3D场景
前言什么才是智慧粮仓正所谓"国以民为本,民以食为天".粮食既是关系国计民生和国家经济安全的重要战略物资,也是人民群众最基本的生活资料.其中粮仓是粮食建设的根基,对保障粮食安全尤 ...
【3D商城】切换产品与场景效果
[3D商城]切换产品与场景效果产品内容放入列表场景内容放入列表点击选中框外观状态设置结果产品内容放入列表在Product.vue中,产品列表prod-list标签下写产品的内容(class ...
3D全景沉浸式体验场景未来城质量保障方案总结
未来城是淘宝探索下一代互联网电商在3D场景中的创新尝试,借助了云端强大的GPU完成高清复杂的场景渲染,实现3A影视级画面,端到端200ms时延,用户无需下载大型的安装包,就可在淘宝APP上启用自己的3 ...
基于WebGL架构的3D可视化平台—粮仓3D场景
前言什么才是智慧粮仓正所谓"国以民为本,民以食为天".粮食既是关系国计民生和国家经济安全的重要战略物资,也是人民群众最基本的生活资料.其中粮仓是粮食建设的根基,对保障粮食安全尤 ...
OPenGL笔记--创建一个3D场景
文章目录一.前言二.效果展示三.详细流程 3.1.World.txt文件规则 3.2.加载World.txt 3.3.绘制场景 3.4.交互四.详细代码五.举一反三一.前言通过前面的学习 ...
html5 3d场景设计,打造H5里的“3D全景漫游”秘籍－腾讯ISUX
原标题:打造H5里的"3D全景漫游"秘籍 - 腾讯ISUX 近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于 ...
SimLab Composer 10 for Mac(3D场景制作软件)
SimLab Composer 10 for Mac是应用在Mac上的一款3D场景制作软件,支持三维场景建立.渲染.共享和动画等功能,可让您从各种3D cad格式创建3D场景,SimLab Compo ...
Silverlight.XNA(C#)跨平台3D游戏研发手记：(十)3D 场景与控制设计①
模型和骨骼动画仅仅是开启3D游戏的敲门砖,置入基于摄像机的场景设计方能呈现最完美的3D游戏.本节,我们依旧从简单着手,一步步创建基于模型的3D游戏场景. <XNA4.0学习指南(中文)>是 ...
假3D场景逼真到火爆外网！超1亿像素无死角，被赞AI渲染新高度
萧箫杨净发自凹非寺量子位报道 | 公众号 QbitAI 先来看一段"视频",有没有看出什么不对劲的地方? 其实,这仅仅是由一组照片渲染出来的(右下角为拍摄照片)! 生成的 ...

ThingJS 3D场景层级切换，体验不一样的动感！

ThingJS层级切换启用与暂停

ThingJS 3D场景层级切换，体验不一样的动感！相关推荐

最新文章

热门文章