本文主要是介绍【Three.js】工厂可视化 立体库房，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
基于 three.js 的工厂可视化 立体库房
- 重复模型优化方案
- 合并模型方案介绍
- Merge合并几何体
- Instance实例化几何体
- 前端动画的密集计算
- .clone()的使用和内存回收
- 总结一下
- 相关项目
立体库房
重复模型优化方案
合并模型方案介绍
| 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()的使用和内存回收
更新中…
总结一下
具体实现方式，以及性能优化的处理方法将持续更新……
相关项目
🚩——坦克大战
📦—— 立体库房
🎄—— 圣诞树
✅—— 程序员升职记
🏀—— 投个篮吧
💖——粒子爱心
这篇关于【Three.js】工厂可视化 立体库房的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
