3D可视化应用开发对每个企业来说都是大工程，需要投入大量的人力物力财力才能做好这项工程，但其实可是化繁为简，不需要大费周章，具体来说，thingjs3D可视化开发平台，基于webgl3D绘制标准，使用最热门的Javascript语言，封装threejs库，前端工程师可实现在线开发，可视化场景通过拖拽和简单写一些代码，对接数据源，项目部署之后就可以运行在您的服务器了~真是简单好用呢。
/**
* 说明：将场景中对象展示到界面上
* 操作：点击界面上选择框
* 说明：场景初始化完成后，子物体的显隐、样式默认继承父物体的显隐状态、样式
* 通过 obj.inheritVisible = true/false 控制子物体是否继承父物体显隐状态
*/
// 引入jquery.easyui插件
THING.Utils.dynamicLoad(['lib/jquery.easyui.min.js', 'lib/default/easyui.css'], function() {
var panel =
`<div class="easyui-panel" style="opacity: 0; padding:5px; width: 300px;height: auto;margin-top: 10px;margin-left: 10px; position: absolute; top: 0; left: 0; z-index: 1;background-color: white">
<ul id="objectTree" class="easyui-tree"></ul>
</div>`
$('#div2d').append($(panel));
})
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
// 这里使用了jquery.easyui的tree插件
app.on('load', function (ev) {
var buildings = app.query('.Building');
buildings.forEach(function (building) {
building.floors.forEach(function (floor) {
// 设置楼层不受建筑显隐控制
// floor.inheritVisible = false
})
});
$('#objectTree').parent().css('opacity', 1);
$('#objectTree').tree({
data: getRootData(ev.campus),
checkbox: true,
cascadeCheck: false,
onCheck: function (node, checked) {
app.query('#' + node.id).visible = checked;
}
})
});
// 根节点信息由 建筑 和 室外物体 组成
function getRootData(campus) {
var data = [];
campus.buildings.forEach(function (building) {
data.push(getBuildingData(building));
});
campus.things.forEach(function (thing) {
data.push(getThingData(thing));
});
return data;
}
// 收集 建筑 信息
function getBuildingData(building) {
var data = {
id: building.id,
checked: true,
state: 'closed',
text: building.type + ' (' + building.id + ')'
};
data["children"] = [];
building.floors.forEach(function (floor) {
data["children"].push(getFloorData(floor));
});
return data;
}
// 收集 楼层 信息
function getFloorData(floor) {
var data = {
id: floor.id,
checked: true,
state: 'closed',
text: floor.type + ' (level:' + floor.levelNumber + ')'
};
data["children"] = [];
floor.things.forEach(function (thing) {
data["children"].push(getThingData(thing));
});
return data;
}
// 收集 物 信息
function getThingData(thing) {
return {
id: thing.id,
checked: true,
text: thing.type + ' (' + thing.name + ')'
};
}
简单好用threejs库3D可视化平台thingjs，前端工程师会js就可以的，试一下你就知道如何做啦~
