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

作者：前端开发爱好者

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

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

Astral 3D Editor 是什么？

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

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

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

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

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

bash 复制代码

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

进入项目目录：

bash 复制代码

cd Astral3DEditor

使用 Yarn 安装项目依赖：

复制代码

yarn install

在开发环境中启动项目：

arduino 复制代码

yarn run dev

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

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 技术持续进步。