说实话，这个问题Zui近在私信箱里蹦出来的频率高得有点让我受宠若惊。kan着屏幕上闪烁的光标，我不禁回想起去年——也就是2025年那个有些寒冷的冬天。那时候，裁员的大潮像是一股无法抗拒的寒流，卷走了hen多人原本安稳的生活，我也未Neng幸免。也就是在那段迷茫的空窗期，我决定不再被动等待，而是试图用自己Zui擅长的技术去寻找一条新的出路。

起初，我的想法hen简单，甚至有点“功利”：我想开发一套商用的Three.js 3D项目模版。我想，既然hen多公司dou需要3D展示，但又不想从零开始搭轮子，那我把这套东西打磨好，卖给有需要的团队，换取一点生活费，这听起来是个不错的计划。那时候，我确实也这么Zuo了并且陆陆续续收到了一些正向的反馈，甚至有几位朋友愿意为此付费。这让我在失业的焦虑中，稍微喘了一口气。

但是随着时间的推移，我内心深处的那种“技术洁癖”和分享欲开始作祟。我发现，hen多购买这套代码的同学，其实并不是为了拿去Zuo商业项目，他们仅仅是为了学习Three.js，为了搞懂这个让人又爱又恨的3D引擎。为了学习一个框架而去支付几百块，对于学生或者初入职场的朋友来说这确实是一笔不小的开支。这让我心里多少有些过意不去。

于是在经过了一年多的反复折腾、推倒重来之后我Zuo出了一个决定：与其把它藏着掖着Zuo一个收费的模版，不如把它Zuo成一个成熟的、真正好用的3D低代码编辑器产品，并且将核心代码免费开源。这就是ThreeFlow诞生的由来。

ThreeFlow：不仅仅是代码，geng是一套完整的解决方案

当你点开这个项目的时候，你kan到的不再是一堆散乱的文件，而是一个基于现代前端工程化标准构建的庞然大物。我们选用了Three.js + Vue3 + Vite + TypeScript这套“黄金组合”。为什么要这么选？因为Vue3的响应式系统在处理3D场景的状态同步时简直是神器，而Vite那种秒级的启动速度，Neng让你在开发时保持心情愉悦。至于TypeScript，那是给代码加上的一层安全气囊，虽然写起来啰嗦了点，但维护起来你会感谢我的。

为了确保代码质量不至于写成“屎山”，我强行给自己定了一套规矩：集成ESLintStylelintPrettier，再加上Husky和CommitLint。这意味着，每一次提交代码，dou会经过严格的格式检查和约束。虽然这在开发初期让我抓狂了无数次但现在的代码库kan起来整洁得像刚装修好的样板房，清爽、规范。

geng重要的是我把Three.js那些核心的操作模块全部进行了抽离和封装。你不需要在几百行的代码里去寻找相机控制在哪里也不需要为了改一个材质属性而翻遍整个项目。这种模块化的设计，极大地降低了在Vue3中集成Three.js的心智负担。

🚀 怎么跑起来？

别担心，这里没有复杂的webpack配置地狱。只要你装了pnpm，一切就简单得像喝水一样：

pnpm install
pnpm serve

当然Ru果你想打包部署，或者生成生产环境的代码，直接跑 pnpm build 或者 pnpm build:pro 就完事了。

这玩意儿到底Neng干啥？核心功Neng大揭秘

既然叫编辑器，那肯定得有编辑器的样子。我不希望它只是一个只Nengkan不Neng用的玩具。在功Neng设计上，我参考了hen多市面上成熟的3D软件，同时也结合了Web端的特性。

1. 像搭积木一样创建场景

你还在手写 new THREE.BoxGeometry 吗？太out了。在ThreeFlow的左侧面板，我设计了一个拖拽区域。不管你想往场景里扔个立方体、球体，还是灯光、相机，直接用鼠标拖进去就行。这种所见即所得的感觉，真的会让人上瘾。你不需要关心坐标系的初始化，编辑器帮你搞定了一切脏活累活。

2. 模型格式的“大杂烩”支持

Zuo3D开发Zui怕什么？Zui怕模型格式不兼容。美术同学给你发个FBX，结果你只Neng干瞪眼。为了解决这个问题，我把市面上常见的格式dou支持了个遍：glb, .obj, .gltf, .fbx, .stl, .usdz。不管你是从SketchFab上下下来的，还是用Blender导出的，扔进编辑器里它就Neng给你渲染出来。而且，这些模型加载进来后并不是死板的图片，它们是Ke以被编辑、被操作的。

3. 熟悉的快捷键，熟悉的配方

Ru果你用过Blender或者Maya，你会对这套快捷键感到无比亲切。按下 W 键，拖拽手柄出现了你Ke以随意移动物体；按下 E 键，旋转模式开启；R 键自然就是缩放了。还有一个我hen喜欢的功Neng——F 键，当你迷失在茫茫3D空间找不到物体时按一下F，视角瞬间聚焦到选中的物体上，简直是救命稻草。

4. 第一人称漫游：走进你的世界

有时候，我们需要以“人”的视角去审视场景，而不是上帝视角。编辑器里内置了第一人称漫游模式。你Ke以像玩FPS游戏一样，用WASD控制移动，用鼠标控制视角。这对于Zuo展厅、kan房类的3D应用来说简直是调试利器。

5. 悔棋神器：撤销与重Zuo

这大概是开发过程中Zui耗费精力的功Neng之一，但也是Zui有用的。谁没有手滑删错东西的时候？谁没有把模型调得面目全非想回退的时候？在这里Ctrl+Z 是你的后悔药。无论是位置、缩放、旋转，还是材质的修改，统统支持撤销。这背后是一套严密的状态管理机制在支撑，虽然写起来头大，但用起来真香。

6. 材质与动画的深度调优

模型进来了位置摆好了接下来就是“化妆”环节。你Ke以动态修改模型的材质属性。想换个颜色？想加点透明度？或者想调整一下金属度和粗糙度，让物体kan起来geng有质感？右侧的属性面板douNeng搞定。甚至，Ru果你的模型自带动画，编辑器也Neng识别并支持播放。你Ke以让多个模型的动画同时跑起来kankan整体效果是否协调。

7. 场景的“存档读档”

辛辛苦苦搭好的场景，关掉浏览器就没了？那肯定不行。ThreeFlow支持场景数据的持久化存储。你Ke以把整个场景保存下来下次打开接着干。或者，你Ke以把场景导出为JSON文件，分享给同事，让他们在你的基础上继续开发。当然Zui终Zuo好的模型，你也Ke以导出为 .gltf.glb.obj 等标准格式，直接丢到你的业务代码里去用。

关于浏览器兼容性的那些事儿

WebGL这东西，虽然强大，但对浏览器还是有点挑剔的。经过我的一番测试，目前的兼容性情况大概是这样的：

Chrome这是我的亲儿子，强烈推荐。Three.js官方也是首推它，性NengZui稳，坑Zui少。

Edge 既然内核和Chrome一样，那表现自然也是没得说一样丝滑。

Firefox老牌劲旅，支持良好。虽然在某些极端的Shader渲染上性Neng可Neng稍微逊色于Chrome，但日常使用完全没问题。

Safari 这是个让人又爱又恨的家伙。它支持WebGL，但总是有些奇奇怪怪的兼容性问题。Ru果你是Mac用户，记得多测测，尤其是涉及到纹理压缩的时候。

Opera基于Chromium，表现和Chrome基本一致，放心用。

项目结构：一眼kan懂的门道

为了让大家Nenggeng容易地读懂代码，我把目录结构也梳理得井井有条。这不仅仅是给别人kan的，也是为了防止我自己过两个月忘了代码写在哪。

/assets这里放的是静态资源，图片、图标什么的dou往这扔。

/components全局组件。那些在多个页面dou会用到的UI组件，我dou放这里了。

/config配置文件的大本营。常量啊、静态数据啊，dou在这里统一管理。

/enums写TypeScript少不了枚举，这里定义了项目中用到的各种枚举类型。

/layouts布局组件。Ru果你想换个皮肤或者调整页面框架，kan这里。

/router路由配置，Vue项目的标配，不用多说。

/store状态管理。用了Pinia，比Vuexgeng轻量，也geng符合Vue3的Composition API风格。

/style样式文件。CSS、SCSSdou在这别把样式写得到处dou是那是噩梦。

/typesTS类型定义。有了这个，你在调用方法的时候，IDE会给你极其友好的提示。

/utils这是核心中的核心。工具函数和逻辑封装dou在这比如Three.js的初始化、渲染循环、事件监听等等。

/views页面视图。具体的业务页面代码。

写在Zui后：开源不仅仅是为了Star

把ThreeFlow开源出来其实心里挺复杂的。这不仅仅是一堆代码，geng是我过去一年多时间的心血，是无数个熬夜写代码的夜晚，是无数次踩坑又爬出来的记录。我把它放到GitHub和Gitee上，是希望它Neng成为大家学习Three.js的一块垫脚石。

Ru果你正在学习WebGL，或者正准备用Three.jsZuo一个企业级的项目，不妨去读读它的源码。我不敢说它是完美的，但它绝对是经过实战检验的。希望它Neng帮你少走一些弯路，让你在3D开发的道路上走得稍微顺畅那么一点点。

当然Ru果你觉得这个项目对你有帮助，哪怕只是帮你在面试的时候多吹了五分钟牛，那我的目的就达到了。Ru果方便的话，去GitHub或者Gitee上给个Star⭐吧。这对我来说不仅仅是数字的增加，geng是对我熬夜秃头Zui大的支持和鼓励。

项目地址我就不贴了大家搜一下 ThreeFlow 或者 z2586300277/three-editor 就Neng找到。未来的路还hen长，Three.js也在不断geng新迭代，我会一直维护下去的。让我们一起，在Web3D的世界里折腾出geng多好玩的东西吧！

---