Three.js 场景不用手写了，这个开源编辑器拖拽就能出数字孪生效果
学 Three.js，绕不开这个体验：创建 Scene、Camera、Renderer，加一个 BoxGeometry，调整光源，写完 50 行代码，屏幕上出现一个灰色方块。
这不是坏的起点，但有点慢。你在代码里调光源位置，结果看不出来；改材质颜色，渲染出来和想象的不一样——3D 场景里很多参数和直觉是反的，只看代码很难建立感知。
three-editor 是一个基于 Three.js 的可视化编辑器，做的事情是把"写代码调参数"变成"拖滑块看变化"。打开浏览器，不写一行代码，也能搭出有光源、有模型、有动画的完整 3D 场景。
在线体验：https://z2586300277.github.io/three-editor/dist/#/editor (opens in a new tab)
GitHub：https://github.com/z2586300277/three-editor (opens in a new tab)
为什么"拖拽生成场景"是可行的
这背后有个设计决策值得说一下。
Three.js 的使用方式是命令式的：你写代码告诉它"创建一个球体、设置材质、加到场景里"。three-editor 把这套命令式逻辑翻译成了数据：场景里的每个物体都变成一条配置，描述它的类型、位置、颜色、大小。编辑器保存的不是代码，而是这份 JSON。
// Three.js 原始写法
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// three-editor 的数据驱动方式
// 所有属性变成配置项，由内核解析并渲染这样做的好处是：场景可以被序列化存储、随时加载，用户改的每个参数都直接映射到 JSON，不需要知道背后调用了哪个 API。这是低代码的基础。
项目分两层：编辑器 UI 用 Vue 3 + Element Plus 构建，是给用户直接使用的界面；底层内核发布成了独立 npm 包 three-editor-cores，用 VanJS（一个只有 0.9kB 的微型响应式库，不依赖 Vue）写成，可以嵌入 React、Vue 或原生 HTML 项目里。
在编辑器里能做什么
界面的组织方式和大多数 3D 软件一致：左侧场景层级树、右侧属性面板、中间实时视口。对初学者来说，这个布局本身就是一次教育——左边管"有什么"，右边管"怎么样"。
属性面板用的是 dat.GUI。 这个库在 Three.js 社区里很常见，通常用来做开发时的调试面板。这里把它集成进了编辑器，选中任意物体，它的参数就出现在面板里：颜色、尺寸、位置、透明度，拖动滑块，视口实时响应。光源也一样——加一个点光源，拖动它的位置，观察光在物体上的投影变化。Three.js 光照模型里那些"为什么这个面是暗的"问题，在这里一眼就能看出答案。
动画走的是 GSAP。 Three.js 本身没有内置动画系统，three-editor 集成了 GSAP——Web 端最主流的动画库——来处理物体的平移、旋转、缩放序列。在编辑器里配置一条路径，底层是 GSAP 的 tween 在驱动。
场景可以导出为 JSON。 搭好以后导出，这份文件描述了所有物体的属性，加载回来就能还原。这个功能对想把编辑器嵌入自己业务系统的开发者来说比较实用——产品经理在编辑器里配好场景，保存 JSON，前端加载渲染。
案例库比编辑器本身更值得看
编辑器之外还有一个独立的案例库：
https://z2586300277.github.io/three-editor/dist/#/example这里有几十个现成场景：旋转地球、粒子系统、工厂车间可视化、设备监控大屏、城市建筑群、Cesium 地图叠加……每个案例可以直接跑，也可以切到代码视图看实现。
对初学者来说，这个"先看效果、再看代码"的流程比从文档从头读要直观得多。遇到不理解的地方，切回编辑器改一个参数，看看视口里变了什么——这种即时反馈比单独盯着代码理解得更快。
国内做 3D 可视化大屏的项目里，数字孪生和工业场景出现频率很高。案例库里这部分内容比较完整，场景结构和数据联动的处理方式可以直接参考。
本地跑起来
在线版可以直接用，不用安装。如果想看源码，需要 Node.js 18+ 和 pnpm：
git clone https://github.com/z2586300277/three-editor.git
cd three-editor
pnpm install
pnpm devsrc/ 目录下是编辑器的 Vue 组件实现，包括组件如何注册、配置如何映射到渲染、场景如何序列化。项目里还有一个 codeMirror 模块，提供了在线写 Three.js 代码直接运行的环境，类似针对 Three.js 的 CodePen。
如果是嵌入自己项目，用 npm 包就够了：
npm install three-editor-cores写在最后
three-editor 适合两类使用场景：一是 Three.js 初学者，用它建立对 3D 空间、光照、材质的视觉直觉，比单啃文档快；二是有数字孪生或工业可视化需求的开发者，案例库里有大量可以直接参考的场景实现，核心包也方便集成进现有项目。
项目 500+ Star，作者持续维护，文档完整。有问题可以提 Issue 或加项目内附的 QQ 群。
GitHub：https://github.com/z2586300277/three-editor (opens in a new tab)