摘要：是的我又失业了，为什么要有个又字呢，因为在去年的这个时候我已经准备马上要入职这家公司了，在入职转正的三个月后我还写过一篇文章《谈谈在大环境低迷下，找工作和入职三个月后的感受》大概谈了一下当时公司入职的感受。不过在长期996和一个相对压抑的工作氛围以及高强度的工

是的我又失业了，为什么要有个又字呢，因为在去年的这个时候我已经准备马上要入职这家公司了，在入职转正的三个月后我还写过一篇文章《谈谈在大环境低迷下，找工作和入职三个月后的感受》 大概谈了一下当时公司入职的感受。

不过在长期996和一个相对压抑的工作氛围以及高强度的工作内容下，这对我来说也是一种解脱。

具体细节内容，后面我会专门写一篇文章来分享一下我在上一家公司的遭遇和情况吧

当然言归正传，今天主要还是给大家分享一下在失业的这一个半月多时间里我都干了些什么→

大概就是完成了一个这样的非开源项目。

为什么会写这样一个非开源项目呢?

答：因为在23年底左右的时间我写过一个3D模型可视化编辑器的开源项目

(目前已经是gitee推荐项目)，因为项目的部分功能能够满足一些企业3D的相关的开发需求，于是有很多人私信找到我能不能基于这个开源项目做一些扩展的定制化需求，但是因为上一家公司的原因（996），所以大部分需求我并没有一个较好的时间和精力来沟通协调，于是就都委婉拒绝掉了。

所以在失业的这段时间里，我也终于有时间和精力将这些需求整理完善和升级，于是有了最终的 3D模型场景编辑器 项目

为什么是非开源的项目呢?

答：开源项目

适用于想学习three.js并且希望能够使用three.js快速开发一个实际3D相关项目的前端同学的一个学习参考媒介，项目技术栈使用Vue3+Vite+JavaScript+Pinia，项目本身也是永久开源，并且长期稳定更新的。

非开源项目结合一部分商业化的定制需求，以及基于开源项目很多功能的体验优化和升级而衍生的，并且对于开源项目中的一些性能问题和模型数据存储方案有了更好的方式。技术栈使用 Vue3+Vite+TypeScript+Pinia+indexedDB 适合用于企业级3D相关项目的开发和二次开发。

作者个人的产品理念：用爱发电的项目最终是无法长久的发展下去，免费的东西有时候往往会更加昂贵，非开源项目的产出是为了开源项目更好的发展。

项目的在线链接地址：

3D模型场景编辑器 :

首先作为企业级项目的开发我个人考虑最多的就是：项目的模块化、项目的规范化、代码的可读性

项目的模块化

项目是基于 Vue3+Typescript+Pinia+indexedDB 来实现的

项目结构主要细分为：

1. assets 静态资源

2. components 公共/全局组件

3. config 常量配置

4. enums 全局枚举

5. layouts 布局

6. router 路由

7. store 全局状态

8. style 全局样式

9. types 全局ts类

10. utils 工具函数、three.js场景操作方法封装、indexDb方法封装

11. views 页面

这几个大模块

项目的规范化

项目使用了 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使用，完全可以使用免费开源版的项目

来源：科技浪潮之巅