在失业的这一个多月里,我写了一个3D模型场景编辑器

前言

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

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

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

当然言归正传,今天主要还是给大家分享一下在失业的这一个半月多时间里我都干了些什么→3D模型场景编辑器 大概就是完成了一个这样的非开源项目。

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

答:因为在23年 底左右的时间我写过一个3D模型可视化编辑器的开源项目threejs-3dmodel-edit(目前已经是gitee推荐项目),因为项目的部分功能能够满足一些企业3D的相关的开发需求,于是有很多人私信找到我能不能基于这个开源项目做一些扩展的定制化需求,但是因为上一家公司的原因(996),所以大部分需求我并没有一个较好的时间和精力来沟通协调,于是就都委婉拒绝掉了。

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

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

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

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

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

项目的在线链接地址:

3D模型场景编辑器 three3d-0gte3eg619c78ffd-1301256746.tcloudbaseapp.com/threejs-mod...

项目的主要结构

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

项目的模块化

项目是基于 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使用,完全可以使用免费开源版的项目gitee.com/ZHANG_6666/...

如果有企业级和商业化的3D开发需求,作者更愿意推荐商业版的3D场景编辑器项目

相关推荐
桂月二二23 分钟前
Vue3状态管理深度解析:Pinia架构设计与性能优化实践
vue.js
_未知_开摆2 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
喝拿铁写前端2 小时前
不同命名风格在 Vue 中后台项目中的使用分析
javascript·vue.js
lvbb663 小时前
框架修改思路
前端·javascript·vue.js
qq_456001653 小时前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
工业互联网专业3 小时前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台
FanetheDivine4 小时前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js
Json_4 小时前
Vue 构造器 Vue.extend
前端·vue.js·深度学习
伶俜monster4 小时前
UV 法向量实验室:Threejs 纹理与光照炼金术
前端·webgl·three.js
小old弟4 小时前
老生常谈: 谈谈对vue的理解?vue3有而vue2没有的东西或者说特性?
前端·vue.js