使用 ThingJS在有限空间内体现上千个可视化对象

来源：互联网 2023-03-17 00:12:10 版权归原作者所有，如有侵权，请联系我们

在物联网可视化系统的场景中，摄像头、门禁、对讲、报警等对象少到上千，多达上万个，在 3D 可视化中即要展示每个对象所处的空间位置，也要对每个对象进行操作。在可视化展示中无法较好地展示。

工具/原料

以往的经验，在设备上方创建贴在屏幕上的 UI，就有了下面这种效果。这是一种错误示例。这样的一种展示方式不能看到对象所处的位置，很难辨别对象类型，也不能体现3D的可视美观性，同时在场景转动时更难定位对象的准确位置。

基于以上问题，我们尝试不使用图标标识位置的方案，采用一种新的位置定位可视化模式。将场景中的建筑虚化展示，每个管理对象增加对应的效果，这样在建筑外还是在单一楼层处都能够看到每一类型对象。

使用 ThingJS在有限空间内体现上千个可视化对象

2本页面未经许可获取自百度经验

代码实现其实很简单，以下代码片段接口可参考ThingJS官方API文档

首先需要替换建筑材质

app.buildings.forEach(build=>{

varfloors=build.floors;//得到建筑所有楼层

floors.forEach(floor=>{

floor.plan.style.setMaterial({

image:'/blue1.jpg',//设置一张贴图样式

wrap:THING.WrapType.Repeat,//设置重复度

DoubleSide:true,//设置对象双面贴图

});

//更换墙体的材质

floor.wall.style.setMaterial({

image:'/gray.png',

wrap:THING.WrapType.Repeat,

transparent:true,

});

})

});

使用 ThingJS在有限空间内体现上千个可视化对象

然后是设置每个对象outline颜色

app.query('.Thing').forEach(thing=>{

thing.style.outlineColor='#00FF00';//设置对象轮廓线颜色

})

使用 ThingJS在有限空间内体现上千个可视化对象

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

上一篇：tomcat不安全的HTTP方法下一篇：简单快速的查询maven依赖