原创 答案answer 2025-04-21 08:30 重庆
点击关注公众号，“技术干货” 及时达！
关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding
前言
言归正传，今天主要还是给大家分享一下在失业的这一个半月多时间里我都干了些什么→ 3D模型场景编辑器 大概就是完成了一个这样的非开源项目。
为什么会写这样一个非开源项目呢?
答：因为在23年底左右的时间我写过一个3D模型可视化编辑器的开源项目threejs-3dmodel-edit(目前已经是gitee推荐项目)，因为项目的部分功能能够满足一些企业3D的相关的开发需求，于是有很多人私信找到我能不能基于这个开源项目做一些扩展的定制化需求，但是因为上一家公司的原因，所以大部分需求我并没有一个较好的时间和精力来沟通协调，于是就都委婉拒绝掉了。
所以在失业的这段时间里，我也终于有时间和精力将这些需求整理完善和升级，于是有了最终的 3D模型场景编辑器 项目
为什么是非开源的项目呢?
答：开源项目threejs-3dmodel-edit适用于想学习three.js并且希望能够使用three.js快速开发一个实际3D相关项目的前端同学的一个学习参考媒介，项目技术栈使用Vue3+Vite+JavaScript+Pinia，项目本身也是永久开源，并且长期稳定更新的。
非开源项目 3D模型场景编辑器 结合一部分商业化的定制需求，以及基于开源项目很多功能的体验优化和升级而衍生的，并且对于开源项目中的一些性能问题和模型数据存储方案有了更好的方式。
技术栈使用Vue3+Vite+TypeScript+
Pinia+indexedDB适合用于企业级3D相关项目的开发和二次开发。
「作者个人的产品理念」：用爱发电的项目最终是无法长久的发展下去，免费的东西有时候往往会更加昂贵，非开源项目的产出是为了开源项目更好的发展。
项目的在线链接地址：3D模型场景编辑器
https://three3d-0gte3eg619c78ffd-1301256746.tcloudbaseapp.com/threejs-model-edit-pro/
项目的主要结构
首先作为企业级项目的开发我个人考虑最多的就是：项目的模块化、项目的规范化、代码的可读性
项目的模块化
项目是基于Vue3+Typescript+Pinia+
indexedDB来实现的
项目结构主要细分为：
这几个大模块
项目的规范化
项目使用了
Eslint+Prettier+Stylelint+Husky
这一套代码格式化检查工具来确保项目代码的规范化，如果项目代码不符合相关校验规则就无法成功推送代码到github
并添加了较为严格的Typescript类型检查（不能使用any）当然如果你不需要这个也可以在（.eslintrc.cjs）关闭这个校验
代码的可读性
项目大的方向定位是要适用于企业3D项目的二次开发，因此代码的可读性和可维护变得极其重要
项目的所有的关键函数方法都采用了 JsDoc 模式的代码注释以确保能够快速上手项目内容
项目的主要功能
1. 拖拽添加模型，几何体模型，灯光，加载电脑本地模型文件（.glb,obj,gltf,fbx,usdz,stl）
2. 模型属性，模型材质，几何体模型参数，灯光参数，照相机参数，动画参数的编辑
4.渲染器，场景，地面的参数动态调试
主要针对于这些参数进行了动态的编辑
渲染器：的色调映色、阴影、曝光度
场景：背景、环境光、雾
地面：地面类型 、天气
5.场景保存，场景预览，场景导出，场景导入
在使用three.js场景设置过程中你辛苦调试了半天的场景内容，被一不小心的刷新页面或者关闭了浏览器窗口而丢失了数据的情况吧
3D模型场景编辑器项目使用了 indexDb和 .json 的这两种方式来对场景内容进行存储
6.模型导入，导出
场景的导出是将整场景内容包括（模型，灯光，天气，等数据进行导出），而模型的导出则只是针对导出场景中的所有模型
7.模型复制和删除功能
在编辑场景内容时我们可能需要重复添加一个模型多次，这时候有模型复制功能就会十分方便了
8.相关快捷键
作为一款定位于编辑器类型的项目，快捷键功能肯定是必不可少的，为了方便模型场景的相关操作，也提供了一些便捷的快捷键使用功能
结语
在当前大环境的发展下很多企业的招聘中会要求使用three.js，Babylon.js 等webGL框架，如果你相在前端领域有更好的职业发展和前景学会一种webGl框架的使用一定不会是一件坏事
如果只学习和参考three.js相关的API使用，完全可以使用免费开源版的项目https://gitee.com/ZHANG_6666/Three.js3D
如果有企业级和商业化的3D开发需求，作者更愿意推荐商业版的3D场景编辑器项目
https://three3d-0gte3eg619c78ffd-1301256746.tcloudbaseapp.com/threejs-model-edit-pro/
