三维可视化已经应用到各行各业中,技术人员在选择开发平台时也会多方面考量,到底哪个平台更适合自己来做可视化应用的开发工作。thingjs就是专门面向物联网的3D可视化开发平台,前端工程师掌握js就可以在thingjs平台上操作,通过拖拽以及简单写一些代码,大型场景上述问题解决办法
在 CamBuilder 中我们可以分成多个工程进行搭建,比如园区和所有建筑的外立面使用一个独立的工程进行搭建,每栋建筑的室内可分别使用其他独立工程进行搭建。在搭建过程中有一条重要的规则需要遵守:
每个工程里的物体命名需要保证唯一
为了保证物体对象不重名,每个工程里的命名(工程文件的名称就是园区的名字),和每个工程里建筑的命名都要唯一。因为建筑的外立面和室内是在两个工程里分开搭建的,两个工程里本应有同一个名字的建筑,但为了后期可以加载到一起,就不能用同一个建筑名字了。
比如,建模需求是一个园区内有一个建筑,我们分成两个工程进行搭建,分别是“XX工业园区”、“XX工业园区-办公楼室内”,工程内物体命名如下:
XX工业园区(工程文件名,代表园区名),包括如下物体:
办公楼(建筑)
办公楼外立面(建筑外立面)
XX工业园区-办公楼室内(此工程和上个工程文件名不能一样),包括如下物体:
办公楼楼层一(楼层)
桌子。。。。。(物体)
办公楼楼层二(楼层)
桌子。。。。。(物体)
分别导出各个工程,并上传到 ThingJS 网站;
在 ThingJS 先加载"XX工业园区",该园区中包含建筑,但该建筑只有外立面。
使用事件,可重新注册进入建筑的响应函数,事件回调内使用 app.create ,动态加载“XX工业园区-办公楼室内”这个园区工程。
再使用代码,获取“办公楼TMP”这个园区物体的建筑,将其下的“办公楼楼层一”,“办公楼楼层二”,添加到本来只有外立面的“办公楼”对象身上。再将“XX工业园区-办公楼室内”和“办公楼TMP”这些临时对象删掉。此时,我们就动态加载了一个完整的“办公楼”。
要保证后加载的楼层和之前加载建筑对齐
方案如下:
在 CamBuilder 搭建场景时,保证楼层相对建筑“办公楼”和“办公楼TMP”的位置一致。
在 ThingJS 在线开发中,将“办公楼TMP”下的楼层“挂接”到“办公楼”时,设置楼层的相对坐标。
buildingTmp.floors.forEach(function(floor){buildingMain.add({object:floor,// 设置相对坐标,楼层相对于建筑的位置保持一致localPosition:floor.localPosition});})
提前知道未加载场景的物体结构
有时我们还需要在未加载场景的时候知道一个物体在场景树里的位置,以便于飞过去。我们提供两套方案:
我们提供 app.getCampusJSON 接口,可以在不加载园区场景的情况下,解析出该园区的场景树结构,做些类似上面动态加载场景的操作,在3D系统中建立完整的场景结构。我们再通过 EnterLevel 相关事件,配合上面自动动态加载的方案,就可以找到并飞到物体。
用户也可以自行建立后台数据结构,后台进行查询,通知前台,前台使用 EnterLevel 相关事件,配合上面自动动态加载的方案,就可以找到并飞到物体。
thingjs作为三维可视化应用开发平台适合很多前端工程师来操作,主要原因在于简单好操作,只要是掌握js就可以实现可视化应用的开发工作。建议大家一试!