首页 > 其他 > 详细

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

时间:2021-06-01 19:12:05      阅读:20      评论:0      收藏:0      [点我收藏+]

一、query()查询物体

二、 其他查询方法

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

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

一、query()查询物体

1、 获取园区中的物体

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

app.on(‘load‘,?function?()?{
?var?obj?=?app.query(value),
})

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

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

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

//?加载ThingJS示例园区
var?app?=?new?THING.App({
?url:?‘https://www.thingjs.com/static/models/storehouse‘
});
//?通过load事件回调函数,添加界面按钮并绑定按钮事件
app.on(‘load‘,?function?()?{
?new?THING.widget.Button(‘按name正则查询‘,?queryByRegExp);
});
//?根据正则表达式匹配?name?中包含‘car‘的物体,点击按钮后更改物体颜色
function?queryByRegExp()?{
?var?cars?=?app.query(/car/);
?//?上行代码等同于
?//?var?reg?=?new?RegExp(‘car‘);
?//?var?cars=app.query(reg);
?
?cars.forEach(function?(obj)?{
?obj.style.color?=?‘red‘;
?})
}

运行项目后,点击按name正则查询按钮,数字孪生可视化园区内对应的车辆就会变成红色。

技术分享图片

2、获取园区中单个物体

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

app.on(‘load‘,?function?()?{
?var?obj?=?app.query(value)[index],
})

应用示例:查询建筑

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

//加载ThingJS示例园区
var?app?=?new?THING.App({
?url:?‘https://www.thingjs.com/static/models/storehouse‘
});
?
//通过load事件加载园区信息,通过query()方法查询建筑,并将查询结果显示在日志窗口
app.on(‘load‘,?function?()?{
?console.log(app.query(‘.Building‘)[0]);
});

运行项目后,在日志窗口,可以显示出查询的结果,即 ThingJS 示例园区中此建筑的信息。

技术分享图片

3、获取地图中的物体

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

//?加载地图
var?app?=?new?THING.App();
?
//?引用地图组件脚本
THING.Utils.dynamicLoad([‘https://www.thingjs.com/uearth/history/uearth.min.v1.7.8.12.js‘],?function?()?{
?app.create({
?type:?‘Map‘,
?//?地图场景名:map_6
?url:?‘myMapDirectory’,
?complete:?function?(event)?{
?console.log(app.query(value));
?}
?});
});

二、其他查询方法:

父子属性

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

//?加载ThingJS示例园区
var?app?=?new?THING.App({
?url:?‘https://www.thingjs.com/static/models/storehouse‘
});
?
//?通过load事件加载园区
app.on(‘load‘,?function?(ev)?{
?
?var?campus?=?ev.campus;?//获取园区对象
?
?//?通过场景的父子树访问对象
?var?children?=?campus.children;
?for?(var?i?=?0;?i?<?children.length;?i++)?{
?var?child?=?children[i];
?var?id?=?child.id;
?var?name?=?child.name;
?var?type?=?child.type;
?console.log(‘id:?‘?+?id?+?‘?name:?‘?+?name?+?‘?type:?‘?+?type);?//日志窗口中返回查询信息
?};
})

运行结果如下:

技术分享图片

分类属性

下面的代码中,通过分类属性来查询对象,并将查询结果显示在日志窗口中。

//?加载ThingJS示例园区
var?app?=?new?THING.App({
?url:?‘https://www.thingjs.com/static/models/storehouse‘
});
?
//?加载场景后执行
app.on(‘load‘,?function?(ev)?{
?//?获取园区对象
?var?campus?=?ev.campus;
?
?//?日志窗口中显示园区内的?Thing?物体
?campus.things.forEach(function?(thing)?{
?console.log(‘Thing:?‘?+?thing.id);
?});
?
?//?获取园区下的建筑对象
?var?buildings?=?campus.buildings;
?buildings.forEach(function?(building)?{
?console.log(‘Building:?‘?+?building.id);
?});
?
?//?日志窗口中显示第一个建筑中所有的楼层
?buildings[0].floors.forEach(function?(floor)?{
?console.log(‘Floor:?‘?+?floor.id);
?});
});

运行结果如下:

技术分享图片

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


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

原文:https://blog.51cto.com/u_15159105/2842525

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!