当前位置: 首页 > Web前端 > HTML5

从零开始学习3D可视化的场景层级(二)

时间:2023-04-05 00:47:18 HTML5

1.动态创建组合场景2。对齐加载的地板和建筑物3。预测未知加载场景的对象结构对于一些大型3D可视化场景,直接使用CampusBuilder制作难度会更高,而且直接加载也存在性能和加载时间等问题。为了解决这个问题,CampusBuilder可以分成多个工程进行建设。例如,校园的外立面和所有建筑物均由一个独立的项目建造,而每栋建筑物的内部则由其他独立的项目建造。但在构建过程中,需要注意的是每个项目中对象的命名必须是唯一的。1.动态创建组合场景比如我按照下面的步骤搭建一个3D可视化公园,开发应用。1.建设3D可视化园区。公园里有一栋建筑。我把它分成两个项目来建设,分别是“XX产业园”和“XX产业园-写字楼室内”。2.分别导出每个项目并同步到ThingJS平台;3.首先在ThingJS中加载“XX工业园区”,里面包含建筑物,但是建筑物只有门面。4、使用事件,可以重新注册进楼响应函数,在事件回调中使用app.create(),动态加载园区项目“XX产业园-写字楼内景”。5、使用代码获取3D可视化园区对象“办公楼TMP”的建筑物,将其下的“办公楼1楼”和“办公楼2楼”添加到原本只有“办公楼”的对象中立面体。然后删除临时对象“XX工业园-写字楼内部”和“写字楼TMP”。2.加载的楼层与建筑物的对齐为了保证后面加载的3D可视化楼层与前面加载的建筑物对齐,可以这样做:在CampusBuilder中构建3D可视化场景时,确保楼层相对于建筑物“办公楼”和“办公楼TMP”。位置是一样的。在ThingJS在线开发中,将“办公楼TMP”下的楼层“挂钩”到“办公楼”时,设置楼层的相对坐标。buildingTmp.floors.forEach(function(floor){buildingMain.add({object:floor,//设置相对坐标,保持楼层相对于建筑物在同一位置localPosition:floor.localPosition});})3.预测unloadedscene如果在未加载3D可视化场景的情况下,需要知道某个物体在场景层级中的位置,从而切换视角,有两种方法:1.可以使用app。本例分析公园的场景树结构,做一些类似上面动态加载场景的操作,在3D系统中建立完整的场景结构。然后通过EnterLevel相关事件,结合上面的自动动态加载方案,可以找到并切换到对象。2.也可以自己搭建后台数据结构,查询后台,通知前台,在前台使用EnterLevel相关事件,配合上面的自动动态加载方案进行对象的查找和切换。细心的朋友会发现,给每个物体起个名字是为了以后扩展功能,相当于给物体在场景中有了一个唯一的标识,以后会很方便。至此,我完成了一个完整的3D可视化“办公楼”的动态加载。完整代码可以点击ThingJS官方示例查看。