乐趣区

关于javascript:ThingJS如何360°旋转3D房屋

jiezi

三维场景的视角能够设置不同的航行地位，还可能对场景进行 360 旋转，看到一个修建不同的立面，得出不同的数据信息，这就是 ThingJS 展现屋宇的办法。

ThingJS 如何去展现屋宇？这个太简略了，首先咱们要晓得，ThingJS 是物联网可视化 PaaS 开发平台，能帮忙物联网开发商轻松集成 3D 可视化界面。ThingJS 名称源于 物联网 Internet of Things (IoT) 中的 Thing (物)，ThingJS 应用当今最热门的 JavaScript 语言进行开发。不仅能够针对单栋或多栋修建组成的园区场景进行可视化开发，搭载丰盛插件后，也能够针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种畛域。

也就是说，ThingJS 次要是帮忙物联网开发商来去开发我的项目的，是一个平台，而不是说 thingjs 去开发我的项目，是应用 thingjs 平台去开发物联网可视化我的项目，而 thingjs 在线开发中的 160 个官网示例可不是就干摆在那的，这些示例都是用户在开发中可能遇到的各种需要，而后被 thingjs 给装配进去，造成了一个个官网示例，所以 thingjs 的官网人员会说，看完这个 160 个官网示例，就能迅速的开发物联网可视化我的项目了。

这次为大家分享的是 thingjs 楼层地板展现的 Demo，源码位于 thingjs 网站的在线开发示例中，该 Demo 处于【修建构造 - 地板屋顶】，有趣味的能够进入 thingjs 中查看该示例：https://www.thingjs.com/s/c8e…

官网示例：

/**

  • 阐明：展现楼层与房间 地板与屋顶的区别
  • 只有在 CampusBuilder 中编辑了 UserID、Name 或自定义属性的房间，
  • 能力在 ThingJS 中创立为 Room 对象，否则将合并到楼层
  • 因而，楼层下的地板与天花板即为这些被合并的房间的

*

  • 操作：点击复选框

*/
var app = new THING.App({

// 场景地址
"url": "https://www.thingjs.com/./uploads/wechat/emhhbmd4aWFuZw==/scene/ 修建测试 03"

});
var panel;
// 创立数据对象
var dataObj = {

checkbox: {
    '楼层地板': false,
    '房间地板': false,
    '楼层屋顶': false,
    '房间屋顶': false
}

};

app.on(‘load’, function (ev) {

var campus = ev.campus;
var floor = app.query('.Floor')[0];
app.level.change(floor);

createCheckBox();

})

app.on(THING.EventType.EnterLevel, ‘.Floor’, function (ev) {

panel.visible = true;

}, ‘ 进入楼层显示面板 ’)

app.on(THING.EventType.LeaveLevel, ‘.Floor’, function (ev) {

panel.visible = false;

var checkboxState = dataObj.checkbox;
checkboxState['楼层地板'] = false;
checkboxState['房间地板'] = false;
checkboxState['楼层屋顶'] = false;
checkboxState['房间屋顶'] = false;

}, ‘ 退出楼层暗藏面板 ’)

function createCheckBox() {

// 界面组件
panel = new THING.widget.Panel({
    titleText: '地板 屋顶',
    hasTitle: true, // 是否有题目
});
panel.visible = false;

// 界面绑定对象
var checkbox = panel.addCheckbox(dataObj, 'checkbox');
checkbox[0].on('change', function (ev) {if (app.level.current instanceof THING.Floor) {
        var curFloor = app.level.current;
        var plan = curFloor.plan;
        if (ev) {plan.style.color = '#ff0000';}
        else {plan.style.color = null;}
    }
});

checkbox[1].on('change', function (ev) {if (app.level.current instanceof THING.Floor) {
        var curFloor = app.level.current;
        var rooms = curFloor.rooms;
        rooms.forEach(function (room) {
            var plan = room.plan;
            if (ev) {plan.style.color = '#ffff00';}
            else {plan.style.color = null;}
        })
    }
});

checkbox[2].on('change', function (ev) {if (app.level.current instanceof THING.Floor) {
        var curFloor = app.level.current;
        var roof = curFloor.roof;
        roof.visible = ev;
        if (ev) {
            roof.style.color = '#0000ff';
            roof.style.opacity = 0.6;
        }
        else {roof.style.color = null;}
    }
})

checkbox[3].on('change', function (ev) {if (app.level.current instanceof THING.Floor) {
        var curFloor = app.level.current;
        var rooms = curFloor.rooms;
        rooms.forEach(function (room) {
            var roof = room.roof;
            roof.visible = ev;
            if (ev) {
                roof.style.color = '#0000ff';
                roof.style.opacity = 0.3;
            }
            else {roof.style.color = null;}
        })
    }
})

}

示例完结。

3D 可视化实质上是空间数据可视化，在直观的平面图形上理解不同物体的指标状态，有微小的商业数据价值。

本文由博客群发一文多发等经营工具平台 OpenWrite 公布

退出移动版