项目背景开发物联网公共安全管控3D云平台，目标是利用最新的数据挖掘技术和3D可视化手段，显著提升气体行业设备监测、管理的效率和安全性。技术栈使用 Vue3 进行界面开发，Pinia 进行状态管理，scss 与 naive-ui 进行界面样式设计，Blender 3D 建模，Three.js 前端渲染。角色和职责作为项目的前端主要开发人员，我主导了以下关键工作：使用 Blender 构建精确的设备和楼层 3D 模型。利用 Three.js 实现复杂的 3D 模型和动效前端渲染。开发实时报警动效和基于云平台数据的图表查看功能。基于 Rush 搭建高效的开发框架，提升项目的开发流程和协作效率。技术难点与解决方案前端需求收集和模型建造难点获取精确的设备尺寸和楼层数据对于构建准确模型至关重要。解决方案通过现场勘察和手动测量设备尺寸，确保了 3D 模型的真实性和准确性。结果使用 Blender 成功创建了高度贴近现实的 3D 模型，为后续的前端渲染打下坚实基础。模型前端效果渲染难点实现高性能且真实的模型渲染效果，特别是在处理材质、灯光和动效时面临挑战，重复模型。解决方案模型优化，使用简化修改器和低三角面模型设置自定义属性，满足前端渲染需求模型材质，提取封装公共材质，小面积的在 blender 里直接设置模型材质，大面积的全部使用前端代码设置材质图片压缩重复模型，先在 blender 里建造了预占位盒子，前端渲染后效果可以，然后提取坐标点数据，前端根据坐标点数据复制模型模型效果气体管道流动效果：通过修改材质纹理（箭头图片），并在更新类里设置材质的 x 偏移量，达到流动效果排风管道流动效果：由于管道是多个模型拼接而成，纹理 UV 方向不同，首先通过 blender 修改所有管道的 UV 方向，使所有方向在一个轴上，然后前端通过修改材质，材质自定义顶点和着色器代码，并在更新类里设置材质的 time 变量，达到流动效果结果实现了流畅且具有高度真实感的3D场景渲染，增强了用户体验，并通过ECharts和Vue3全家桶实现了高级数据可视化功能。