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

电脑，独立显卡

ThingJS开发工具

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

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

代码实现其实很简单，以下代码片段接口可参考ThingJS官方API文档首先需要替换建筑材质app.buildings.forEach(build => {    var floors = 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,        });    })});

然后是设置每个对象outline颜色app.query('.Thing').forEach(thing => {    thing.style.outlineColor='#00FF00';// 设置对象轮廓线颜色})