无障碍进入三维模拟场景？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在线开发。