进入ThingJS 3D场景，有两种简单的查询方法

在ThingJS中，任何模型都可以拉近或进入，切换不同的场景，进行微观学习，呈现出2D平面完全不同的效果。

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);
});

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利用兄弟元素的额处理方法，以及query查询功能来逐步实现，让3D开发很简单！