thingjs的控制层级效果

zzzzzker 1月前 199

如何控制楼层的层级效果?比如进入楼层展开楼层?三维可视化园区中该怎么去访问对象?又是如何让场景显示和隐藏的呢?在ThingJS物联网可视化PaaS平台中,ThingJS提供了控制场景的方法,让我们来看看它是如何控制的吧!


ThingJS官方示例中按分类访问对象,使用全局APP对象,通过forEach函数遍历园区中所有对象,并且打印出对象的id属性。

/**
* 说明:通过 “分类对象属性树” 访问场景内的对象
* 操作:无,查看log信息
* 教程:ThingJS 教程——>园区与层级——>场景层级
* 难度:★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});

// 加载场景后执行
app.on('load', function (ev) {
// 获取园区对象
var campus = ev.campus;

// 打印园区内的 Thing 物体
campus.things.forEach(function (thing) {
console.log('Thing: ' + thing.id);
});

// 获取园区下的建筑对象
var buildings = campus.buildings;
buildings.forEach(function (building) {
console.log('Building: ' + building.id);
});

// 打印第一个建筑中所有的楼层
buildings[0].floors.forEach(function (floor) {
console.log('Floor: ' + floor.id);
});

});



/**
* 说明:通过 “父子树” 访问场景内的对象
* 操作:无,查看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);
});


ThingJS通过THING.widget.Button方法来创建按钮,通过query方法来查询,括号内可以是id也可以是name。具体如何使用可以查看API。

/**
* 说明:演示场景层级切换的相关API
* 操作:
* 园区加载完成 将层级设置为园区后 开启了系统的层级控制
* 点击「进入楼层」「进入书柜」跳转到相应层级
* 点击「返回上一级」返回到上一层级
* 教程:ThingJS教程——>园区与层级——>如何切换层级
* 难度:★★☆☆☆
*/
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse',
    skyBox: 'Night'
});

app.on('load', function (ev) {
    // 场景加载完成后 进入园区层级 开启默认的层级控制
    app.level.change(ev.campus);

    new THING.widget.Button('进入楼层', function () {
        // 通过name查询得到楼层
        var obj = app.query('108')[0];
        // 将层级切换到楼层
        app.level.change(obj);
    });

    new THING.widget.Button('进入书柜', function () {
        // 通过name查询得到书柜
        var obj = app.query('cabinetB4')[0];
        // 将层级切换到书柜
        app.level.change(obj);
    });

    new THING.widget.Button('返回上一级', function () {
        // 返回上一层级
        app.level.back();
    });
});


在ThingJS中,使用building.floors.visible方法控制楼层是否可见,使用isHorzMode、isHideRoof 属性来控制水平或者垂直展开。

/**
* 说明:楼层展开和恢复功能
* 操作:点击按钮和选择框
*/
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});

// 加载场景后执行
var building = null;
app.on('load', function (ev) {
    building = ev.buildings[0];

    new THING.widget.Button('楼层展开', test_expand);
    new THING.widget.Button('楼层合并', test_unexpand);
});

// 水平展开或垂直展开(可尝试修改后运行看效果)
var isHorzMode = false;
// 展开楼层时是否隐藏天花板
var isHideRoof = true;

// 展开建筑楼层
function test_expand() {
    // 在园区层级下 建筑内的楼层默认是隐藏的
    // 因此 在园区层级下 展开楼层需设置该建筑下的楼层可见
    building.floors.visible = true;
    // 隐藏建筑的外立面
    building.facades.visible = false;
    building.expandFloors({
        'time': 1000,
        'distance': isHorzMode ? -30 : 10,
        'horzMode': isHorzMode,
        'hideRoof': isHideRoof,
        'complete': function () {
            console.log('expand complete ');
        }
    });
}

// 恢复建筑楼层
function test_unexpand() {
    building.unexpandFloors({
        'time': 500,
        'complete': function () {
            building.floors.visible = false;
            building.facades.visible = true;
            console.log('unexpand complete ');
        }
    });
}


看到这写代码是不是觉得很简单?很多人都会拿threejs来横向对比ThingJS,夸奖threejs不但免费而且功能强大,但是实际上呢?两者的面向群众是不尽相同的铲子和挖掘机都能挖地,那是不是就不要铲子了呢?这个比喻虽然不恰当,但也说明了这一点,threejs免费、开源,全球都有许多人使用,人群广,技术更是层层推进,制作一个简单的方盒子都需要近百行代码,因为它“要求更高”!threejs更适合那些3D爱好者和民间大神去使用,而ThingJS的定位就是,给前端工程师看看,一周内就能上手开发项目的,ThingJS更偏向于项目的制作与交付,说白了,一个是理想主义者(threejs),而一个是现实主义者(thingjs),追求更精密的操作,更加高大上的效果,建议使用threejs或者是其他免费开源的软件,而要是进行项目一级的制作,需要进行交付等等,那么使用ThingJS,反而是一个更好的选择。

最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回