Three.js Editor · 官方在线版
浏览器内 3D 场景编辑器
它解决什么问题
Three.js Editor 是 Three.js 官方提供的场景编辑器，可以在浏览器里搭 3D 场景、摆模型、调材质灯光，然后把整个场景导出成一份可直接运行的 HTML。它的价值在于「快速验证」：想确认某个光照角度或材质参数好不好看，不用搭构建环境，打开网页就能调。
三个典型使用场景
- 给产品做一个 360° 展示页，先在这里摆好相机和灯光再导代码
- 学习 Three.js 时可视化理解场景图（Scene Graph）层级关系
- 快速检查一个 glTF 模型能否正常加载、贴图有没有丢
和 ToolHub 本地工具怎么配合
图片压缩：3D 场景截图往往很大，压到 300KB 以内再放进 README 或落地页（本地工具，文件不上传）
图片格式转换：需要把渲染结果转成 WebP 或 JPEG 时，站内转换不用装任何图形软件（本地工具，文件不上传）
同类可替代方案
- Excalidraw —— 手绘风格白板画图，协作绘图神器
- tldraw —— 精致的无限画布白板，交互丝滑
- draw.io —— 最流行的流程图/架构图绘制工具
使用时要注意什么
没有版本管理和协作能力，导出的 HTML 是单文件、代码结构比较原始；不适合做上线项目，只适合验证和教学。
常见问题
Three.js Editor 是免费的吗？
Three.js Editor 是开源项目，采用 MIT 许可证，官方在线版可以免费使用，不需要为基本功能付费。ToolHub 只做收录与说明，不代管你的数据，也不提供账号或存储服务。
Three.js Editor 适合什么场景？
最常见的是这几种：给产品做一个 360° 展示页，先在这里摆好相机和灯光再导代码；学习 Three.js 时可视化理解场景图（Scene Graph）层级关系；快速检查一个 glTF 模型能否正常加载、贴图有没有丢。判断标准很简单——如果你现在正为了这件事装一个几百 MB 的桌面软件，先用它试一次。
它和 ToolHub 的本地工具有什么区别？
ToolHub 的本地工具把代码放在你的浏览器里执行（WebAssembly 或原生 JS），文件不经过服务器；Three.js Editor 由项目作者维护，数据在其服务器或你的浏览器中处理，具体取决于项目实现，使用前建议先看对方的数据政策。需要「绝对不上传」时可以改用站内同类工具。
用 Three.js Editor 有什么限制？
没有版本管理和协作能力，导出的 HTML 是单文件、代码结构比较原始；不适合做上线项目，只适合验证和教学。
相关阅读
- 颜色格式转换 —— HEX / RGB / HSL 互转，附色块预览与 CSS 变量（在浏览器内执行，不联网也能用）
- 颜色对比度检查 —— 按 WCAG 标准检查文字与背景的对比度是否达标（在浏览器内执行，不联网也能用）
- 全部设计类工具 —— 按分类筛选，含本地执行与目录直达
- Excalidraw —— 同类别另一个选择
项目来源：github.com/mrdoob/three.js · License: MIT · 分类：设计
官网地址：https://threejs.org/editor/（新标签页打开 threejs.org）
说明：本页是 ToolHub 对该开源项目的整理与推荐，工具由项目作者维护，版权与数据归原作者所有。官网无法访问时可能是临时故障或网络限制。
安全、快捷、开源工具及资源
无需安装、无需注册、无需命令行 —— 挑一个工具，填参数，出结果。