搜索

从零开始学习3D可视化之获取对象

[复制链接]
2193|1
森友小锘|  楼主 | 2021-6-1 16:07 | 显示全部楼层 |阅读模式
本帖最后由 森友小锘 于 2021-6-1 16:11 编辑

一、query()查询物体

二、 其他查询方法

数字孪生可视化场景中,添加完对象之后,我们如何尽快查找到对象呢?ThingJS中获取对象有如下几个方法:通过父子属性获取对象;通过分类属性获取对象;使用 query 方法获取对象。

一般来说,我们通过 query() 方法来查询物体(即获取对象)。下面我将详细讲解通过 query 方法获取对象的方法。找到物体后,就可以通过 ThingJS API 提供的功能来控制该物体了。

一、query()查询物体

1、 获取园区中的物体

获取 CampusBuilder 数字孪生可视化园区中的物体时,需要将 query() 方法添加到 load 事件的回调函数中。绑定 load 事件来通知园区物体加载完成,然后就可以通过 query() 方法来获取数字孪生可视化园区中的物体了。代码如下所示。

  1. app.on('load', function () { var obj = app.query(value),})
复制代码

这个方法我们查询到的是一个 Selector集合,即数字孪生可视化园区中带有该属性的所有物体。

应用示例:按属性查询物体

加载场景后,添加按正则name查询按钮,数字孪生可视化园区内对应属性的模型可以被查询到。

  1. <span style="color: rgb(18, 18, 18); font-family: monospace; font-size: 12.96px; white-space: pre; background-color: rgb(246, 246, 246);">// 加载ThingJS示例园区
  2. var app = new THING.App({
  3. url: 'https://www.thingjs.com/static/models/storehouse'
  4. });
  5. // 通过load事件回调函数,添加界面按钮并绑定按钮事件
  6. app.on('load', function () {
  7. new THING.widget.Button('按name正则查询', queryByRegExp);
  8. });
  9. // 根据正则表达式匹配 name 中包含'car'的物体,点击按钮后更改物体颜色
  10. function queryByRegExp() {
  11. var cars = app.query(/car/);
  12. // 上行代码等同于
  13. // var reg = new RegExp('car');
  14. // var cars=app.query(reg);

  15. cars.forEach(function (obj) {
  16. obj.style.color = 'red';
  17. })
  18. }</span>
复制代码
运行项目后,点击按name正则查询按钮,数字孪生可视化园区内对应的车辆就会变成红色。





2、获取园区中单个物体

需要获取数字孪生可视化园区中的单个物体(如建筑)时,需要添加[index],指明查询的对象为单个物体。

  1. app.on('load', function () { var obj = app.query(value)[index],})
复制代码

应用示例:查询建筑

将下面的代码输入到项目文件中,即可加载 ThingJS 示例园区,并在日志窗口显示查询建筑的结果。

  1. <span style="color: rgb(18, 18, 18); font-family: monospace; font-size: 12.96px; white-space: pre; background-color: rgb(246, 246, 246);">//加载ThingJS示例园区
  2. var app = new THING.App({
  3. url: 'https://www.thingjs.com/static/models/storehouse'
  4. });

  5. //通过load事件加载园区信息,通过query()方法查询建筑,并将查询结果显示在日志窗口
  6. app.on('load', function () {
  7. console.log(app.query('.Building')[0]);
  8. });</span>
复制代码
运行项目后,在日志窗口,可以显示出查询的结果,即 ThingJS 示例园区中此建筑的信息。





3、获取地图中的物体

获取 CityBuilder 地图中的物体时,需要将 query() 方法添加到 complete 的回调函数中。

  1. <span style="color: rgb(18, 18, 18); font-family: monospace; font-size: 12.96px; white-space: pre; background-color: rgb(246, 246, 246);">// 加载地图
  2. var app = new THING.App();

  3. // 引用地图组件脚本
  4. THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/history/uearth.min.v1.7.8.12.js'], function () {
  5. app.create({
  6. type: 'Map',
  7. // 地图场景名:map_6
  8. url: ‘myMapDirectory’,
  9. complete: function (event) {
  10. console.log(app.query(value));
  11. }
  12. });
  13. });</span>
复制代码
二、其他查询方法:

父子属性

下面的代码中,通过数字孪生可视化场景的“父子树”来查询对象,并将查询结果显示在日志窗口中。

  1. <span style="color: rgb(18, 18, 18); font-family: monospace; font-size: 12.96px; white-space: pre; background-color: rgb(246, 246, 246);">// 加载ThingJS示例园区
  2. var app = new THING.App({
  3. url: 'https://www.thingjs.com/static/models/storehouse'
  4. });

  5. // 通过load事件加载园区
  6. app.on('load', function (ev) {

  7. var campus = ev.campus; //获取园区对象

  8. // 通过场景的父子树访问对象
  9. var children = campus.children;
  10. for (var i = 0; i < children.length; i++) {
  11. var child = children[i];
  12. var id = child.id;
  13. var name = child.name;
  14. var type = child.type;
  15. console.log('id: ' + id + ' name: ' + name + ' type: ' + type); //日志窗口中返回查询信息
  16. };
  17. })</span>
复制代码
运行结果如下:





分类属性

下面的代码中,通过分类属性来查询对象,并将查询结果显示在日志窗口中。
  1. <span style="color: rgb(18, 18, 18); font-family: monospace; font-size: 12.96px; white-space: pre; background-color: rgb(246, 246, 246);">// 加载ThingJS示例园区
  2. var app = new THING.App({
  3. url: 'https://www.thingjs.com/static/models/storehouse'
  4. });

  5. // 加载场景后执行
  6. app.on('load', function (ev) {
  7. // 获取园区对象
  8. var campus = ev.campus;

  9. // 日志窗口中显示园区内的 Thing 物体
  10. campus.things.forEach(function (thing) {
  11. console.log('Thing: ' + thing.id);
  12. });

  13. // 获取园区下的建筑对象
  14. var buildings = campus.buildings;
  15. buildings.forEach(function (building) {
  16. console.log('Building: ' + building.id);
  17. });

  18. // 日志窗口中显示第一个建筑中所有的楼层
  19. buildings[0].floors.forEach(function (floor) {
  20. console.log('Floor: ' + floor.id);
  21. });
  22. });</span>
复制代码
运行结果如下:





现在我们已经学会了ThingJS中如何查询具体对象,大家可点击进入ThingJS面向物联网的3D可视化开发平台页面,点击查看ThingJS提供的示例,在自己的项目查询对应对象来实现不同的数字孪生可视化效果。


使用特权

评论回复

相关帖子

泡泡熊a| | 2021-6-2 09:42 | 显示全部楼层
谢谢分型

使用特权

评论回复
扫描二维码,随时随地手机跟帖
您需要登录后才可以回帖 登录 | 注册

本版积分规则

我要发帖 我要提问 投诉建议 申请版主

快速回复

您需要登录后才可以回帖
登录 | 注册
高级模式

本版热帖

本版活跃用户

优质原创写原创,赢大奖

编辑推荐

  • 1 wolfe_yu 得到打赏 ¥180.00
  • 2 最美葫芦娃 得到打赏 ¥155.00
  • 3 hk386 得到打赏 ¥75.00
  • 4 火星国务卿 得到打赏 ¥63.00
  • 5 两只袜子 得到打赏 ¥56.00
  • 6 laocuo1142 得到打赏 ¥50.00
  • 7 linghz 得到打赏 ¥45.00
  • 8 gaon2 得到打赏 ¥45.00
  • 9 ezcui 得到打赏 ¥45.00
  • 10 jlc317 得到打赏 ¥40.00
在线客服 快速回复 返回顶部 返回列表