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

最新推荐文章于 2025-04-22 10:02:01 发布

原创

最新推荐文章于 2025-04-22 10:02:01 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

本文介绍了如何使用ThingJS进行3D场景层级的切换和控制，包括进出层级事件的注册、监听以及在层级变化时添加自定义逻辑。通过THING.EventType.EnterLevel和THING.EventType.LeaveLevel事件，开发者可以实现在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教程——>园区与