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 的界面简洁直观，主要包含以下几个关键区域：

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

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

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

Astral 3D Editor 在线编辑器

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

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

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

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

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

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

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

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

• Astral 3D Editor Github 地址：点击这里
• Astral 3D Editor 官方文档：点击这里

以上关于Vue3 首款 3D 数字孪生编辑器 正式开源！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。