项目名称：ThreeFlow(3D场景编辑器) English
ThreeFlow:一个基于 Three.js+Vue3+Vite+Typescript 实现的3D场景编辑器。
项目采用企业级开发标准，集成 ESLint + Stylelint + Prettier + Husky + CommitLint 确保代码质量保障体系。
对Three.js核心操作模块的功能进行单独模块化抽离封装，降低Three.js在前端现代框架（Vue3）中的开发成本。
pnpm install
pnpm serve
pnpm build/pnpm build:pro
如果你觉得该项目对你有帮助那就留个star吧，这是对作者每次熬夜牺牲休息时间去更新开源项目最大的动力支持
| 名称 | 版本 | 名称 | 版本 |
|---|---|---|---|
| Vue | 3.5.13 | Typescript | 5.7.x |
| Vite | 6.1.x | Element-plus | 2.9.4 |
| Three | 182 | Pinia | 2.3.x |
| TWEEN | 18.5.0 | 详见 package.json |
🤗 |
| 名称 | 版本 | 名称 | 版本 |
|---|---|---|---|
| node | 21.3.0 | npm | 10.2.4 |
| yarn | 1.22.21 | windows | 10 |
| pnpm | 9.15.1 | mac | M1-M4 |
本项目基于 AGPL-3.0 开源协议发布。
您可以：
- ✅ 自由使用：用于个人学习、研究或商业项目。
- ✅ 二次开发：根据需求自由修改源代码。
但您必须遵守以下义务：
- ❗ 开源义务：如果您修改了代码并通过网络提供服务（如 SaaS 网站、Web 应用），必须向该服务的所有用户公开完整的源代码。
- ❗ 保留声明：必须保留原作者的版权声明(项目logo、项目名称、作者名称等)和协议说明。
ThreeFlowX（3D低代码场景编辑器）： 在保留了 ThreeFlow 所有功能的基础上，提供更加丰富多态的3D场景元素内容和更加强大的低代码自定义能力，以及优秀的性能处理和更加灵活便捷的操作。同时也提供了多模型、大场景资源的加载/渲染/存储的解决方案。
在线文档:http://threeflowx.cn/docs/
在线地址:http://threeflowx.cn/edit/
- App.vue : 应用程序的根组件，包含路由视图
- main.js : 应用程序入口文件，负责初始化 Vue 应用、注册全局组件、全局状态、指令和插件
存放静态资源文件：
- iconFont/ : 阿里巴巴矢量图标库文件（地址: https://www.iconfont.cn/）
- image/ : 图片资源
- previewIcon/ : 模型预览图片
- textures/ : 资源贴图文件
全局组件文件：
- Loading/ : 自定义封装的页面加载loading
- index.ts : 组件导出文件
常量配置和静态数据配置文件：
- constant.ts : 常量定义
- defaultDragList.ts : 左侧模型拖拽资源内容数据
- propertyConfig.ts : 静态属性配置项
全局枚举文件：
- enum.ts : 场景、变换控制器、材质等相关枚举定义
- indexDb.ts : IndexedDB 数据库相关枚举
布局组件文件：
- RenderView.vue : 渲染视图布局组件，作为应用的主要承载容器
路由配置文件：
- index.ts : Vue Router 路由配置入口，定义应用页面导航规则
Pinia 状态管理文件：
- indexDbStore.ts : IndexedDB 数据操作状态管理
- pinia.ts : Pinia 实例初始化配置
- sceneEditStore.ts : 场景编辑器核心状态管理（包括场景对象、选中状态等）
样式资源文件：
- iconFont.scss : 字体图标样式定义
- index.scss : 全局通用样式入口
- reset.scss : 浏览器默认样式重置
TypeScript 类型定义文件：
- global.d.ts : 全局通用类型声明
- indexDbTypes.ts : IndexedDB 数据结构类型定义
- renderModelTypes.ts : 渲染模型相关接口定义
- rightPanelTypes.ts : 右侧属性面板配置类型定义
- three-css3d.d.ts : CSS3D 渲染器类型声明
- three-utils.d.ts : Three.js 工具函数类型声明
核心工具函数与逻辑封装：
- directive.ts : Vue 自定义指令注册
- globalComponent.ts : 全局组件自动注册逻辑
- globalProperties.ts : Vue 全局属性挂载
- historyModules/ : 操作历史记录（撤销/重做）模块封装
- indexedDB.ts : IndexedDB 数据库操作封装类
- renderScene.ts : 核心文件，Three.js 场景渲染逻辑封装（初始化、渲染循环、事件监听等）
- sceneModules/ : 场景功能模块（灯光、动画、变换控制等）
- utils.ts : 通用辅助函数
页面视图文件：
- sceneEdit/ : 3D 场景编辑器主视图
- index.vue : 编辑器入口组件
- layouts/ : 编辑器内部布局组件（左侧拖拽栏、右侧属性面板、顶部工具栏等）