三维仿真场景具备弱小的吸引力，通过不同的事件操作例如双击，还能够进入这个物体，增加须要的元素，360°旋转来查看，模仿真实世界的状态。
ThingJS平台次要用到兄弟属性、类身上分类属性和query查问，通过查问这个物体而后联合ThingJS中的层级切换性能，进入到场景中去。
ThingJS查问物体的两种办法
ThingJS中获取对象有两种形式，这里的对象大到一个场景，小到一个元素，都能够利用双击事件来查问到，一种是通过父子树去找到要管制的对象，另一种则是应用Query办法间接去查问咱们要寻找的对象。
1. 应用 parent，children 兄弟属性找到要管制的对象
代码示例
/\*\*
\* 阐明：通过 “父子树” 拜访场景内的对象
\* 操作：无，查看log信息
\* 教程：ThingJS 教程——>园区与层级——>场景层级
\* 难度：★★☆☆☆
\*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 加载场景后执行
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);
}
// id 107 为红色厂区修建，
// parent: app.query('107')\[0\] 为在厂区内创立物体
// 厂区内创立的物体，只有在进入厂区后才会能显示，点击厂区进入，则看到绿色小车
// 当推出厂区后，绿色小车则暗藏
var obj = app.create({
type: 'Thing',
id: 'No1234567',
name: 'truck',
parent: app.query('107')\[0\],
url: 'https://model.3dmomoda.com/models/8CF6171F7EE046968B16E10181E8D941/0/gltf/', // 模型地址
position: \[0, 0, 0\], // 世界坐标系下的地位
complete: function (ev) {
//物体创立胜利当前执行函数
console.log('thing created: ' + ev.object.id);
}
});
var campus = ev.campus;
console.log('after load ' + campus.id);
// 切换层级到园区
app.level.change(campus);
});
[](javascript:void(0); ""复制代码" ")2. 应用Query查问场景内物体
代码示例
/\*\*
\* 阐明：全局查问，依据 id 、name 、类型、属性、正则 等形式查问
\* 操作：点击按钮
\* 教程：ThingJS教程——>获取对象
\* 难度：★☆☆☆☆
\*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
app.on('load', function () {
new THING.widget.Button('按id查问', queryById);
new THING.widget.Button('按name查问', queryByName);
new THING.widget.Button('按name正则查问', queryByRegExp);
new THING.widget.Button('按类型查问', queryByClass);
new THING.widget.Button('按属性查问', queryByProperty);
});
// 搜寻 id 为 2271 的物体
function queryById() {
var car = app.query('#2271')\[0\];
car.style.color = '#ff0000';
}
// 搜寻 name 为'car01'的物体
function queryByName() {
var car = app.query('car01')\[0\];
car.style.outlineColor = '#ff0000';
}
// 依据正则表达式匹配 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 = '#00ff00';
})
}
// 搜寻类型是'Building'的物体
function queryByClass() {
var things = app.query('.Building');
for (var i = 0; i < things.length; i++) {
things\[i\].style.outlineColor = '#0000ff';
}
}
// 搜寻名字中蕴含'car'、并且属性字段userData中马力大于50的物体
function queryByProperty() {
app.query(/car/).query('\[userData/power>50\]').forEach(function (obj) {
obj.style.outlineColor = '#ffff00';
});
}
ThingJS实现大楼之间的切换
如果想从一栋大楼跳回到另一栋大楼或者是间接进入到咱们次要察看对象上呢？其实很简略！
第一步，咱们通过query性能找到咱们要重点观测的物体，代码示例：
var obj = app.query("#110")
app.level.change(obj);
第二步，利用此性能即可实现间接进入这个物体对应的层级，返回咱们的园区层级只须要这么操作：
app.level.change(app.root.defaultCampus);
有对于所有的创立、获取、管制对象操作都能够在ThingJS技术文档找到，帮忙你疾速入门3D在线开发。
发表回复