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

2023-10-08 03:10

本文主要是介绍【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】工厂可视化 立体库房的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/162302

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一