前言
如果你正在学习Three.js,又或者说想使用Three.js开发一个企业级的3D项目，那么threejs-3dmodel-edit 这个项目一定值得你去探索和学习
链接
源码
Gitee: https://gitee.com/ZHANG_6666/Three.js3D
GitHub:https://github.com/zhangbo126/threejs-3dmodel-edit
介绍
threejs-3dmodel-edit：一个基于three.js开发的3D模型可视化编辑器、 包含模型加载，模型文件导入导出，模型背景图，全景图，模型动画，模型灯光，模型定位，辅助线，模型辉光，模型拖拽，模型拆解， 模型材质，3d标签，shader着色器等可视化操作编辑系统，模型编辑数据保存预览和代码嵌入等功能
前端技术:Vue3+Pinia+Threejs+Tailwindcss
项目特点
基于 Vue 3 : 使用 Vue 3 的组合式 API 和 Pinia 状态管理
Three.js 集成 : 深度集成 Three.js 实现 3D 模型渲染和编辑
模块化设计 : 将功能拆分为多个模块，便于维护和扩展
VR 支持 : 支持 VR 模式，可以通过摄像头实现 AR 效果
丰富的编辑功能 : 支持模型材质、光照、动画、后期效果等多方面的编辑
核心模块代码介绍
Three.js 相关方法的操作本身就是相当繁琐且复杂的，一个功能的实现可能就需要几十行甚至上百行的代码，在企业级项目 3D 开发中如果你的代码设计不太合理，可能会导致一个文件出现几千行的代码情况，这对于项目后期的维护和扩展将会是灾难性的。
为了项目后期的扩展和可维护性，项目根据实际的功能模块将 Three.js 相关方法分为了几个大的模块分别用于实现不同的功能
@/utils
initThreeTemplate.jsx : Three.js 场景初始化模板
renderModel.js : 模型渲染工具
storage.js : 本地存储工具
utilityFunction.js : 通用工具函数
vrRenderModel.js : VR 模型渲染工具
@/utils/modelEditClass 目录模型编辑相关的类和模块：
index.js : 模块导出文件，整合所有模型编辑功能
animationModules.js : 动画模块，处理模型动画
backgroundModules.js : 背景模块，处理场景背景
geometryModules.js : 几何体模块，处理模型几何形状
helperModules.js : 辅助工具模块，提供网格、坐标轴等辅助功能
lightModules.js : 灯光模块，处理场景光照
manyModelModules.js : 多模型管理模块，处理多个模型的操作
materialModules.js : 材质模块，处理模型材质
stageFlowModules.js : 后期效果模块，处理辉光等后期效果
tagsModules.jsx : 标注模块，处理模型标注
webGL 在可视化大屏上的解决方案
随着可视化大屏这种低代码技术应用的日益广泛，如何将3D模型内容展示在可视化大屏上也成为了当前大屏低代码技术应用的一个难点
为了解决这一问题，项目也是提供了一个好的解决方案：模型库功能
只需要将当前编辑的模型数据进行保存，然后将不同的模型数据以一个组件的形式进行处理，就可以实现3D模型在可视化大屏上的灵活展示了
如何零代码的将3D模型接入到不同的项目中去
如果你的项目只是想简单的展示一下3D模型的编辑数据，并不想接入复杂的three.js逻辑代码
那么嵌入代码这个功能，可以完美的解决你的问题
只需要将代码复制到你的项目 .html 文件中去就可以了
结语
项目仍在持续迭代开发中，如果你有不错的功能建议或者bug发现，欢迎提交 issues