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