three.js编辑器2.0版本

three.js编辑器 2.0版本发布了

在经历1.0版本上线后两个月后，这段时间也是收集了很多bug和用户的需求建议，于是决定对编辑器现有的功能进行优化升级，以及新增一些模块功能内容。同时也将项目使用中出现的一些常见问题进行收集，并通过在线文档的形式进行展示。

在线链接：https://threejs-model-edit-pro/

用户界面的升级

2.0版本对左侧的场景内容拖拽面板进行了样式重构，由原来的 List 形式改成了Tabs形式（方便有更多新功能的扩展），目前一共有五个 tab 模块的内容：

1. 模型
2. 几何体
3. 灯光
4. 图表
5. 粒子

后续如果有新增的场景内容，也会以新增tab板块的模式进行呈现

新增粒子特效功能

粒子特效功能是本次迭代的核心功能，目前提供了三种类型的粒子特效：火焰，烟雾，烟花
也是通过拖拽的形式向场景中进行添加，同时支持添加多个，并且支持粒子颜色和粒子大小等相关的材质属性内容的在线编辑

同时粒子特效也进行的数据持久化的操作，保存成功后，刷新页面后页面数据不会丢失

新增Echarts 图标功能

本次迭代也同时支持了 echarts图标添加功能，目前提供了饼图，折线图，漏斗图，折线堆叠图，柱状堆叠图

使three.js场景编辑器的功能更加丰富多样化

也同样支持数据的持久化存储

新增同时播放多个模型的多个动画功能

如你想将两个带有动画的模型同时播放动画内容，并且一个模型有多个动画也希望能够同时播放多个动画。
当然这些通通都不是问题，本次迭代也将会同时满足这些功能

优化用户体验和修复一些已知 bug

同时也对一些用户反馈的 bug 和体验问题进行了统一的处理如：👇

1. 项目体积优化提高页面首次加载速度
2. 支持灯光辅助线点击选中提高用户体验效果
3. 修复非选中模型删除后内容面板消失
4. 优化天气效果的粒子真实度
5. 优化相机初始化位置角度
6. 优化导出场景.json文件的体积大小

上线了项目的在线文档

为了方便大家对项目有更好了解项目和快速上手，以及一些项目使用中的问题。

这里也提供了一个简单的在线文档，希望对你有用

在线文档链接：https://threejs-3dscene-docs/

优化项目目录结构

为了能让项目的可读性变得更好，本次迭代也对于项目的目录结构也进行优化使其基于项目的二次开发变得更加简单清晰

将three.js相关的操作方法，单独抽离封装，然后再细分为多个小的模块，减少代码的耦合度

以下是项目目录结构的简单介绍

/src 入口文件

1. App.vue : 应用程序的根组件，包含路由视图和代码禁止调试判断
2. main.js : 应用程序入口文件，负责初始化 Vue 应用、挂载路由、挂载全局状态pinia、注入全局组 件、注入全局方法、注入全局自定义指令。

/src/assets/ 静态资源文件

1. iconFont : 阿里妈妈图标库文件
2. image : 项目中使用的图片
3. previewIcon : 模型预览图片
4. textures : 地面贴图

/src/components/ 公共组件文件

1. Loading : loading 组件和自定义指令 loading
2. index.ts: 组件全局导出文件

/src/config/全局常量配置

1. constant : 常量文件
2. defaultModel : 模型、几何体、光源、颜色默认数据
3. echartsConfig : echarts 各类图表默认数据
4. propertyConfig : 模型属性可编辑值、几何体模型参数边界值配置、颜色选择器默认配置、材质类型、渲染器色调映射、场景阴影、场景背景、场景环境光、地面贴图、雾配置

/src/enums/ 全局枚举

1. indexDb : indexedDB枚举
2. enum : 全局枚举

/src/layouts/ 全局布局文件

RenderView : 渲染视图
/src/router/* 路由文件
index : 路由配置

/src/store/* 全局状态
indexDbStore : indexedDb 全局状态
sceneEditStore : 场景内容 Api 全局状态
pinia : pinia 注册

/src/style/ 全局样式
iconFont : 阿里妈妈图标库样式类
index : 入口文件
reset : 样式重置

/src/types/ 全局TypeScript类
global.d : 扩展 Vue 类型定义
indexDbTypes : indexedDB ts类
renderModelTypes : 全局 ts 类
rightPanelTypes : 全局 ts 类
three-css3d.d : 扩展 three.js CSS3DRenderer 类型定义
three-utils.d : 扩展 three.js SkeletonUtils 类型定义

/src/utils/ 全局函数类方法
directive : 自定义全局指令
globalComponent : 全局组组件创建方法
globalProperties : 全局方法创建函数
indexedDB : indexedDB 方法封装
renderScene : three.js API 操作方法封装
utils : 全局工具函数

/src/utils/historyModules/ 历史操作记录模块
command : 历史记录操作
index : 历史记录操作方法
transformCommand : 变换控制器操作记录

/src/utils/sceneModules/ three.js场景操作模块
animationModules : 动画模块
css3DRendererModules : 自定义 DOM（echarts） 节点模块
createEffectsModules : 粒子特效模块
lightModules : 灯光模块
sceneModules : 场景模块
transformControlsModules : 变换控制器模块
weatherEffectsModules : 天气地面模块

结语

ok,以上就是本次 three.js编辑器 2.0 版本所有更新的内容了，本次功能迭代上线后也会陆续收集更多的需求清单和 bug , 让我们期待 3.0 版本的发布吧