我的Three.js3D场景编辑器免费开源啦🎉🎉🎉

前言

哈喽各位佬，这里话不多说主要是给大家简单分享一下我的另一个 开源项目 (ThreeFlow) ，也是一个基于Three.js开发的3D编辑器类型的项目，如果你正在学习Three.js或者想使用Three.js开发一个企业级的项目那么非常推荐你去学习研究一下这个项目。

ThreeFlow 开源背景

在去年（25年）被裁员失业的背景下，我开始尝试自己开发一个商用性质的Three.js3D项目模版，然后把项目源码提供给有three.js3D开发需求公司，然后赚取一点点的报酬。

当时写的文章：juejin.cn/post/748791...

这也是ThreeFlow 的前身，很庆幸也许是因为之前写的Three.js开源项目 得到了大家的认可，陆陆续续也有人在看到这个项目后选择愿意付费购买这个项目，而我自己也在这段时间里不断的尝试和探索适合自己的模式。

经过25年这一年多时间 的探索和尝试后，我也坚定了要开发一个更成熟稳定的3D低代码编辑器产品 而非一个项目代码模版。

因此在了解到有部分购买的同学只是因为想学习Three.js而去购买的这个项目时，作者个人觉得只是学习一个框架而去花费几十块或者大几百的价格去购买一个项目代码是不太值得的。

于是我也决定将ThreeFlow个人版项目代码，免费开源给大家学习使用，也希望大家在掌握熟悉了Three.js后能够找到一个更加高薪资的工作。

🔗 在线预览链接

threeflowx.cn/study/

🔥 项目描述

ThreeFlow :一个基于 Three.js+Vue3+Vite+Typescript 实现的3D场景编辑器。

采用企业级项目开发标准：

集成 ESLint + Stylelint + Prettier + Husky + CommitLint 确保代码质量规范。

对Three.js核心操作模块的功能进行单独模块化抽离封装，降低Three.js在前端现代框架（Vue3）中的开发成本。

💥 项目界面

⚖️ 项目主要技术栈

名称	版本	名称	版本
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`	🤗

🌐 安装/启动/打包(详见 package.json)

bash 复制代码

 pnpm install

 pnpm serve 
 
 pnpm build/pnpm build:pro

📚 项目主要功能介绍

✅拖拽添加场景内容功能： 通过左侧的拖拽区域选择不同的场景元素往场景中添加内容。
✅导入外部模型资源： 支持glb,.obj,gltf,.fbx,.stl,.usdz 等格式的3D模型导入加载。
✅快捷键功能： 支持 W(拖拽)、E（旋转）、R(缩放)、F(聚焦)等快捷键功能。
✅第一人称模式： 支持第一人称视角漫游功能。
✅撤销/重做功能： 支持使用快捷键 撤销（Ctrl+Z/Command+Z） 和 重做。（Ctrl+Shift+Z/Command+Shift+Z） 实现模型位置，缩放，旋转等属性的撤销和重做。
✅场景内容复制，删除功能： 支持将选中的内容进行删除和复制多个。
✅模型材质属性编辑功能： 支持动态修改模型材质内容如：模型贴图、透明度、材质颜色、材质类型、材质渲染面、粗糙度、金属度等等
✅模型动画播放功能: 支持场景中多个模型多个动画同时播放。
✅项目配置功能： 支持动态修改Three.js渲染器配置如：色调映射、阴影、曝光度。支持动态修改Three.js场景背景、环境光内容。
✅场景内容数据持久化存储： 支持场景内容持久化存储：保存整个场景内容、导出整个场景内容、导入整个场景内容等功能。
✅模型导出功能： 支持将场景中的3D模型内容导出成一个模型并支持多种格式的导出（.gltf、.glb、.obj、.usdz）。

✅ 浏览器设备支持

浏览器	最低支持版本	说明
Chrome	57+	✅ 最推荐，three.js 开发首选
Edge (Chromium)	79+	✅ 与 Chrome 基本一致
Firefox	52+	✅ 支持良好，性能略逊 Chrome
Safari (macOS)	11+	⚠️ 支持 WebGL，但兼容性要多测试
Opera	44+	✅ 基于 Chromium

🌺 项目目录结构介绍

1. 入口文件

App.vue : 应用程序的根组件，包含路由视图
main.js : 应用程序入口文件，负责初始化 Vue 应用、注册全局组件、全局状态、指令和插件

2. /assets 目录

存放静态资源文件：

iconFont/ : 阿里巴巴矢量图标库文件（地址: www.iconfont.cn/）
image/ : 图片资源
previewIcon/ : 模型预览图片
textures/ : 资源贴图文件

3. /components 目录

全局组件文件：

Loading/ : 自定义封装的页面加载loading
index.ts : 组件导出文件

4. /config 目录

常量配置和静态数据配置文件：

constant.ts : 常量定义
defaultDragList.ts : 左侧模型拖拽资源内容数据
propertyConfig.ts : 静态属性配置项

5. /enums 目录

全局枚举文件：

enum.ts : 场景、变换控制器、材质等相关枚举定义
indexDb.ts : IndexedDB 数据库相关枚举

6. /layouts 目录

布局组件文件：

RenderView.vue : 渲染视图布局组件，作为应用的主要承载容器

7. /router 目录

路由配置文件：

index.ts : Vue Router 路由配置入口，定义应用页面导航规则

8. /store 目录

Pinia 状态管理文件：

indexDbStore.ts : IndexedDB 数据操作状态管理
pinia.ts : Pinia 实例初始化配置
sceneEditStore.ts : 场景编辑器核心状态管理（包括场景对象、选中状态等）

9. /style 目录

样式资源文件：

iconFont.scss : 字体图标样式定义
index.scss : 全局通用样式入口
reset.scss : 浏览器默认样式重置

10. /types 目录

TypeScript 类型定义文件：

global.d.ts : 全局通用类型声明
indexDbTypes.ts : IndexedDB 数据结构类型定义
renderModelTypes.ts : 渲染模型相关接口定义
rightPanelTypes.ts : 右侧属性面板配置类型定义
three-css3d.d.ts : CSS3D 渲染器类型声明
three-utils.d.ts : Three.js 工具函数类型声明

11. /utils 目录

核心工具函数与逻辑封装：

directive.ts : Vue 自定义指令注册
globalComponent.ts : 全局组件自动注册逻辑
globalProperties.ts : Vue 全局属性挂载
historyModules/ : 操作历史记录（撤销/重做）模块封装
indexedDB.ts : IndexedDB 数据库操作封装类
renderScene.ts : 核心文件，Three.js 场景渲染逻辑封装（初始化、渲染循环、事件监听等）
sceneModules/ : 场景功能模块（灯光、动画、变换控制等）
utils.ts : 通用辅助函数

12. /views 目录

页面视图文件：

sceneEdit/ : 3D 场景编辑器主视图
- index.vue : 编辑器入口组件
- layouts/ : 编辑器内部布局组件（左侧拖拽栏、右侧属性面板、顶部工具栏等）

💚 项目仓库

GitHub: github.com/zhangbo126/...

Gitee: gitee.com/ZHANG_6666/...

结语

如果你觉得该项目对你有帮助那就给项目留个star⭐吧，这是对作者每次熬夜牺牲休息时间去更新开源项目最大的动力支持😄😁