简单好⽤threejs库3D可视化试⼀下？
3D可视化应⽤开发对每个企业来说都是⼤⼯程，需要投⼊⼤量的⼈⼒物⼒财⼒才能做好这项⼯程，但其实可是化繁为简，不需要⼤费周章，具体来说，thingjs3D可视化开发平台，基于webgl3D绘制标准，使⽤最热门的Javascript语⾔，封装，前端⼯程师可实现在线开发，可视化场景通过拖拽和简单写⼀些代码，对接数据源，项⽬部署之后就可以运⾏在您的服务器了~真是简单好⽤呢。
thingjs-⾯向物联⽹的3D可视化开发平台
/**
* 说明：将场景中对象展⽰到界⾯上
* 操作：点击界⾯上选择框
* 说明：场景初始化完成后，⼦物体的显隐、样式默认继承⽗物体的显隐状态、样式
*      通过 obj.inheritVisible = true/false 控制⼦物体是否继承⽗物体显隐状态
jquery在线库
*/
// 引⼊jquery.easyui插件
THING.Utils.dynamicLoad(['lib/jquery.easyui.min.js', 'lib/default/easyui.css'], function() {
var panel =
`<div class="easyui-panel" >
<ul id="objectTree" class="easyui-tree"></ul>
</div>`
$('#div2d').append($(panel));
})
var app = new THING.App({
url: 'www.thingjs/static/models/storehouse'
});
// 这⾥使⽤了jquery.easyui的tree插件
<('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: pe + ' (' + 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: pe + ' (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: pe + ' (' + thing.name + ')'
};
}
简单好⽤threejs库3D可视化平台thingjs，前端⼯程师会js就可以的，试⼀下你就知道如何做啦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。