一种基于Three.js引擎网页三维大场景搭建系统及性能优化的方法技术方案

本发明专利技术公开了一种基于Three.js引擎网页三维大场景搭建系统及性能优化的方法，涉及三维建模领域，包括模型场景、渲染场景、双场景场景调度中心；所述模型场景，用于模型的存储，模型拾取；所述渲染场景，用于对合并模型的渲染处理；所述双场景场景调度中心，用于将模型加载到模型场景中存储，在模型场景变动时，将相同属性的模型进行合并；同时对渲染场景中相同类型的模型进行删除；同时将合并模型加入或替换到渲染场景中再触发场景渲染刷新。本发明专利技术通过双场景调度，先将模型场景中相同属性的模型合并，再对合并模型渲染，减少渲染时的Draw Call次数，提升场景渲染速度。提升场景渲染速度。提升场景渲染速度。

【技术实现步骤摘要】
一种基于Three.js引擎网页三维大场景搭建系统及性能优化的方法


[0001]本专利技术涉及三维建模领域，具体涉及一种基于Three.js引擎网页三维大场景搭建系统及性能优化的方法。

技术介绍

[0002]在网页中进行三维场景搭建时，通常会加载多个不同类型的三维模型，同一种三维模型会使用到多次，在网页中对三维模型进行拖拽、组合，在每一次加载模型或修改模型坐标后系统会调用Three.js引擎进行三维场景渲染时时刷新场景，每次刷新场景中每一个模型都需要经历一次Draw Call，当场景中使用的模型数量上千时，Three.js就会经历上千次Draw Call，如果每次Draw Call需要2ms的时间，最终渲染一次一千个模型的场景需要2s，当模型数量到达一万个时候，需要20s时间，这种渲染方式整个场景会非常卡顿，在复杂场景下用户无法正常使用系统。

技术实现思路

[0003]本专利技术的目的在于：针对上述存在的问题，提供一种基于Three.js引擎网页三维大场景搭建系统及性能优化的方法，开发基于Three.js引擎的网页三维大场景搭建本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Three.js引擎网页三维大场景搭建系统，其特征在于，包括模型场景、渲染场景、双场景场景调度中心；所述模型场景，用于模型的存储，模型拾取；所述渲染场景，用于对合并模型的渲染处理；所述双场景场景调度中心包括模型加载模块、新模型判断识别模块、合并模块、删除模块、刷新模块；所述模型加载模块，用于将模型加载到模型场景中存储；若是新模型，加载到渲染场景；所述新模型判断识别模块，用于在模型场景变动时，拾取模块并判断是否选中新模型，对选中的新模型识别是自建模型或导入模型；所述模型合并模块，针对自建模型或导入模型选择不同的合并模式，将相同属性的模型进行合并；所述模型删除模块，用于将渲染场景中相同类型的模型进行删除；所述场景渲染刷新模块，用于将合并模型加入或替换到渲染场景中再触发场景渲染刷新。2.根据权利要求1所述的基于Three.js引擎网页三维大场景搭建系统，其特征在于，在双场景场景调度中心识别是自建模型或导入模型时，若识别是自建模型，且是自建模型中的货架类型和文字类型，先进行二次分类，再对于相同属性的模型，提取模型公用的模型三角面信息和每个模型的世界坐标信息，生成新的合并模型；若识别是导入模型，提取模型公用的模型三角面信息和每个模型的世界坐标信息，生成新的合并模型。3.根据权利要求1所述的基于Three.js引擎网页三维大场景搭建系统，其特征在于，加载模型时，若本地存储的模型场景中已存在模型，进行克隆复制，本地加载。4.一种基于Three.js引擎网页三维大场景搭建性能优化的方法，根据权利要求1—3之一所述的基于Three.js引擎网页三维大场景搭建系统，其特征在于，包括：将模型加载到模型场景中存储，在模型场景变动时，拾取模块并判断是否选中新模型；将新模型加载到渲染场景；对选中的新模型识别是自建模型或导入模型；针对自建模型或导入模型选择不同的合并模式，将相同属性的模型进行合并；对渲染场景中相同类型的模型进行删除；将合并模型加入或替换到渲染场景中再触发场景渲染刷新。5.根据权利要求4所述的基于Three.js引擎网页三维大场景搭建性能优化的方法，其特征在于，包括以下具体步骤：S1：用户在网页打开系统，选择FBX格式三维模型文件进行上传，三维模型文件上传时，将三维模型文件和系统硬件产品价格库数据进行信息绑定；S2：在系统中录入三维模型的基础信息，并上传三维模型图片；S3：基础信息录入后，将三维模型绑定的图片平铺在网页侧边栏中；用户点击三维模型图片后，系统发起网络请求，从服务器下载FBX格式三维模型文件，对三维模型文件进行解析，将模型在浏览器中进行渲染，成功加载后将模型存储在本地；当再次加载模型时，系统进行本地加载，不再发起网络请求；S4：系统加载模型时，生成模型唯一ID，绑定价格库中的产品ID、型号、模型名称，设置设备类型、输送速度、提升速度、取放货速度、件数/小时、取放货设备和载货设备名称；
S5：系统加载自建模型时，生成模型唯一ID，唯一自编型号；S6：模型加载完成后，将模型直接添加到渲染场景中，选中当前模型，修改模型属性；修改完成后，双场景场景调度中心将更新后的模型加载到模型场景中进行存储，并取出模型场景中当前设备型号的所有设备集合，对所有设备集合模型进行合并处理，同时对渲染场景中当前设备型号的模型进行删除，同时渲染场景加载新的合并模型，触发渲染场景进行刷新。6.根据权利要求4所述的基于Three.js引擎网页三维大场景搭建性能优化的方法，其特征在于，在S2中，所述基础信息包括输送速度、提升速度、取放货速度、件数/小时、设备功能类型、定义的取放货设备名称和载货设备名称；所述设备功能类型包括：输送设备、单机设备、存储设备、轨迹设备、码分机设备、机器人设备、AGV设备；定义...

【专利技术属性】
技术研发人员：岳华，曹继，邓娴，谢刚，李云皓，杨天平，吴佩芸，韩宇星，杨春艳，王珂，
申请(专利权)人：昆船智能技术股份有限公司，
类型：发明
国别省市：