【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()的使用和内存回收

更新中…

总结一下

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

相关项目

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