ThingJS 官方demo：3D房屋展現

物聯網開發商一般要集成不少監控設備，再利用傳感器傳輸數據，現在2D可視化逐漸升級爲3D，須要開發人員要再學習一門新手藝，爲此，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/c8eb6656283e1e8aa19b1f0c?params=105b0f77fd24654d4eebc434e9

官方示例：

/**
* 說明：展現樓層與房間 地板與屋頂的區別
* 只有在 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;
}
})
}
})
}

示例結束。

經過官方教程和前端代碼的示例，一一對照，在場景下實現某種事件動畫，展現房屋就是這麼簡單！