相较于2D平面的静态显示,3D场景可以实现层级切换、进入操作,通过视角拉近和进入物体,来直观了解模型资源。ThingJS提供双击事件来查询场景内的物体,当然,开发者也可以自定义事件,做出更加炫酷的功能,只要仅用官方默认的操作即可。
ThingJS平台主要用到兄弟属性、类身上分类属性和query查询,通过查询这个物体然后结合ThingJS中的层级切换功能,进入到场景中去。
ThingJS中获取对象有两种方式,这里的对象大到一个场景,小到一个元素,都可以利用双击事件来查询到,一种是通过父子树去找到要控制的对象,另一种则是使用Query方法直接去查询我们要寻找的对象。
代码示例
**
* 说明:通过 “父子树” 访问场景内的对象
* 操作:无,查看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);
});
代码示例
/**
* 说明:全局查询,根据 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';
});
}
如果想从一栋大楼跳回到另一栋大楼或者是直接进入到我们主要观察对象上呢?其实很简单!
第一步,我们通过query功能找到我们要重点观测的物体,代码示例:
var obj = app.query("#110")
app.level.change(obj);
第二步,利用此功能即可实现直接进入这个物体对应的层级,返回我们的园区层级只需要这么操作:
app.level.change(app.root.defaultCampus);
ThingJS是一款轻量化的3D开发平台,层级切换也提供了简单的双击事件,进行视角拉近和360°旋转查看,通过提前设置筛选条件,例如颜色、名称或者类型等,我们可以对某个物体的子对象进行查询,支持全局查询和局部查询,更多内容进入ThingJS文档中心了解。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。