https://mp.weixin.qq.com/s/RrKz_gq7eLxA8qDpe5raIQ
源码地址：https://github.com/z2586300277/three-editor
在线编辑器预览：https://z2586300277.github.io/threejs-editor/#/editor
编辑器案例：https://z2586300277.github.io/three-editor/dist/#/example
效果预览
前言
作为一个前端开发工程师，日常工作中貌似避免不了要跟3D打交道，而3D项目开发，对于很多零基础的前端来说，直接上手着实有些难度，毕竟要想玩转3D，门槛可不低。
无论是智慧城市、工业数字孪生，还是展厅互动展示，都离不开炫酷的3D开发。
因此，不浪今天为大家介绍一个非常受欢迎的的开源项目——Three-Editor，一款基于Three.js的3D低代码编辑器平台。
低代码编辑器
项目介绍
Three-Editor是一个专注于3D场景构建的低代码编辑器内核，旨在降低3D应用开发的技术门槛。
通过可视化的编辑界面，开发者和设计师可以直观地创建、编辑和优化3D场景，无需深入了解复杂的3D编程细节。
这个项目目前已经获得了205颗星，40多次fork，足见其在开发者社区的受欢迎程度。
图片
项目还提供了完整的在线预览、案例展示和详细文档，方便用户快速上手，足以见得作者的用心程度。
丰富的应用场景
数字孪生系统：为工厂、建筑、城市等实体创建数字映射
低代码开发平台：让非专业开发者也能创建3D应用
组态编辑器：适用于工业监控、数据可视化等领域
交互式展示：用于展览、教育、营销等场景的3D内容创作
项目突出亮点
高度自定义性：框架设计灵活，支持深度定制和扩展
组件化架构：通过组件复用提高开发效率
可视化编辑：所见即所得的编辑体验
丰富的案例：提供多种应用场景的实现示例
支持3Dtiles：支持加载3dtiles的数据格式
永久在线文档：完善的使用说明和API文档
npm包支持：提供three-editor-cores包，方便集成到现有项目
尤其值得一提的是，Three-Editor不仅支持原生Three.js，还兼容Cesium.js，这意味着它能够处理从小型3D模型到大规模地理信息系统的各类场景需求。
图片
技术栈
Three-Editor主要基于以下技术栈开发：
主要语言：JavaScript（占比98.3%）
前端框架：Vue3
3D引擎：Three.js和Cesium.js
动画库：GSAP
界面组件：dat.GUI
构建工具：Vite
项目遵循现代前端开发实践，使用Node.js环境（推荐18+版本，最新已更新至Node 20.9.0），并采用pnpm进行依赖管理。
对于想深入了解或贡献代码的开发者，项目源码结构清晰：
src目录包含开发代码
dist目录是构建输出
docs目录存放文档
public目录包含静态资源
源码地址：https://github.com/z2586300277/three-editor
在线编辑器预览：https://z2586300277.github.io/threejs-editor/#/editor
编辑器案例：https://z2586300277.github.io/three-editor/dist/#/example
