【Three.js】工厂可视化 立体库房

在这里插入图片描述
在这里插入图片描述

立体库房

重复模型优化方案

合并模型方案介绍

Instance实例化几何体Merge合并几何体
Material相同相同
Geometry相同不同
单个控制通过索引控制难以实现
生成时间快速缓慢
渲染性能更好
内存占用极少较多

通过这两种合并,可以提升整个场景的性能,两种方案各有利弊,可以在项目中组合使用。在实际做项目时,也许建模师已经将复杂的模型生成了,不再需要通过mergeBufferGeometries进行合并,因此,个人认为常用的提高性能的方式将以instance为主。下面将以立体库房货架模型为例,对优化方案的使用进行说明:

Merge合并几何体

通过上述介绍可知,mergeBufferGeometries使用条件是各部分的material都必须相同,但geometry可以不相同。因此,我们可以使用这个方法去合并货架板面和四个货架腿,由此来生成一个货位单元。

Instance实例化几何体

而InstancedMesh的使用条件是geometry和material都必须相同,并且需求中对每个货位的标识也存在单独控制的可能性。那么,我们就可以根据上面已生成的货位单元,来合并出整个货架,分别定义每个货位单元的排、列、层信息。

前端动画的密集计算

  • 由于web单线程的约束,如果动画复杂且循环周期长,可能需要setinterval和settimeout来处理。以此项目为例,Buffer输送箱子的同时,码垛机需要将货物抓起放置到传送机的托盘上,当托盘被装满,输送机再将装有货物的托盘运送至堆垛机前,堆垛机再将托盘和物料放置到立体库房货架上;出库同理,势必等待agv到位后,堆垛机才能将物料放置agv运出。
  • 可见不到1s的时间,足以让动画中动作不连贯或者出现节拍bug,因此,我这里使用了webworker做模拟运动的计算,这是因为webworker是web上的多线程的唯一解决方案,在运行worker代码的同时,不会影响渲染程序的执行,可以将动画连贯性提高不少。当然,如果考虑数字孪生的同学可以忽略这部分,此方法仅针对前端模拟生成动画数据结果。

.clone()的使用和内存回收

更新中…

总结一下

具体实现方式,以及性能优化的处理方法将持续更新……

相关项目

?——坦克大战
?—— 立体库房
?—— 圣诞树
✅—— 程序员升职记
?—— 投个篮吧


版权声明:本文为u010726809原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。