Vue3 首款 3D 数字孪生编辑器 正式开源！

作者：前端开发爱好者

对于多数前端开发者而言，用 ThreeJS 打造炫酷的数字孪生场景并非易事，需掌握大量专业知识。

如今，一款基于 Vue3、ThreeJS 和 Naive UI 的数字孪生开发框架 ——Astral 3D Editor 正式开源，为 Web3D 开发带来新转机。

Astral 3D Editor 是什么？

Astral 3D Editor 是一款免费开源的三维可视化孪生场景编辑器，主要服务于 Web3D 开发，支持多种常见 3D 模型格式

还具备轻量化 BIM 模型解析及 CAD 图纸预览功能。

Astral 3D Editor 的优势

• 
  
• 功能丰富 ：支持多种 3D 模型格式，可导入导出多类型模型，方便资源整合。它还提供插件系统，可扩展更多功能。同时，支持在线预览 BIM 模型和 CAD 图纸，为建筑、工程等领域提供便利。粒子系统、动画编辑器等功能一应俱全，满足多样化创作需求。
  
• 技术先进 ：以 ThreeJS 为底层 3D 渲染库，结合 Vue3 响应式编程和组件化开发，以及 Naive UI 的丰富组件，构建高效稳定的编辑器框架。其场景数据无损压缩和网络分包渐进存取技术，优化了大规模场景的加载效率。
  
• 开发门槛低 ：作为 3D 低代码创作工具，降低了 Web3D 开发难度，前端开发者无需深入掌握 3D 图形学知识，也能快速创建高质量 3D 场景，提高开发效率。
  
• 开源友好 ：采用 Apache-2.0 License 开源协议，吸引众多开发者参与，形成活跃开源社区，便于交流分享和共同推动项目发展。
  

Astral 3D Editor 快速上手

环境准备

在开始使用 Astral 3D Editor 之前，确保已经安装了以下软件和工具：

• 
  
• Node.js ：建议安装 Node.js ≥ 18.x，可以通过官方链接下载安装。
  
• Yarn ：一个高效的包管理工具，可以通过官方链接进行安装。
  

项目克隆与安装

通过 Git 将 Astral 3D Editor 的项目代码克隆到本地：

git clone https://github.com/mlt131220/Astral3DEditor.git

进入项目目录：

cd Astral3DEditor

使用 Yarn 安装项目依赖：

yarn install

项目运行与构建

在开发环境中启动项目：

yarn run dev

这将启动本地开发服务器，通常会自动在浏览器中打开 Astral 3D Editor 的界面，若未自动打开，可在浏览器中访问 http://localhost:3000。

基础操作指南

Astral 3D Editor 的界面简洁直观，主要包含以下几个关键区域：

• 
  
• 工具栏 ：提供了各种工具按钮，可进行模型导入、视图切换、对象选择和变换等操作。
  

• 
  
• 视图区域 ：用于显示和编辑 3D 场景，支持多种视图模式，如透视图、正交图，以及前置、后置、左置、右置等不同视角的切换。
  

• 
  
• 属性面板 ：用于查看和编辑当前选中对象的属性，可根据不同对象类型进行相应属性的调整。
  

Astral 3D Editor 在线编辑器

Astral 3D Editor 的在线编辑器是其一大亮点，提供了便捷的在线 3D 场景创作体验。

在线编辑器无需安装额外软件，只要有浏览器和网络连接，用户就能直接在浏览器中打开: https://editor.astraljs.com/#/，随时随地进行 3D 场景的创作和编辑。

界面设计简洁直观，操作流程简单易懂，降低了学习成本，初学者也能快速上手，轻松进行模型导入、场景编辑、动画添加等操作，迅速构建出想要的 3D 场景。

此外，在线编辑器还具有出色的跨平台兼容性，支持在 Windows、macOS 以及 Linux 等多种操作系统上运行，兼容各大主流浏览器，包括 Chrome、Firefox、Safari 等，用户可自由选择浏览器进行创作。

值得一提的是，在线编辑器支持通过拖拉拽形式创建场景，操作简单直观，大大降低了 3D 场景创作的门槛。

同时，官方还提供了大量可视化案例展示，这些案例不仅丰富多样，而且具有很高的学习价值，可供用户参考学习，帮助用户更好地掌握 3D 场景创作的技巧和方法。

Astral 3D Editor 的开源，为 Web3D 领域注入新活力。

其功能、技术、开发难度、应用场景和开源优势，使其有望在数字孪生领域发挥重要作用，推动 Web3D 技术持续进步。

• 
  
• Astral 3D Editor Github 地址：https://github.com/mlt131220/Astral3DEditor
  
• Astral 3D Editor 在线编辑器：https://editor.astraljs.com/#/
  
• Astral 3D Editor 官方文档：http://editor-doc.astraljs.com/