无障碍进入三维模拟场景ThingJS-3D提供两种查询方法

三维仿真场景具备弱小的吸引力，通过不同的事件操作例如双击，还能够进入这个物体，增加须要的元素，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);

});

[![ 复制代码](file:///C:\Users\Administrator\AppData\Local\Temp\msohtmlclip1\01\clip_image001.gif)](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 在线开发。