Vue3 首款 3D 数字孪生编辑器

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

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

Astral 3D Editor 的在这里插入图片描述

1.优势
功能丰富 ：支持多种 3D 模型格式，可导入导出多类型模型，方便资源整合。它还提供插件系统，可扩展更多功能。同时，支持在线预览 BIM 模型和 CAD 图纸，为建筑、工程等领域提供便利。粒子系统、动画编辑器等功能一应俱全，满足多样化创作需求。
技术先进 ：以 ThreeJS 为底层 3D 渲染库，结合 Vue3 响应式编程和组件化开发，以及 Naive UI 的丰富组件，构建高效稳定的编辑器框架。其场景数据无损压缩和网络分包渐进存取技术，优化了大规模场景的加载效率。
开发门槛低 ：作为 3D 低代码创作工具，降低了 Web3D 开发难度，前端开发者无需深入掌握 3D 图形学知识，也能快速创建高质量 3D 场景，提高开发效率。
开源友好 ：采用 Apache-2.0 License 开源协议，吸引众多开发者参与，形成活跃开源社区，便于交流分享和共同推动项目发展
2.多格式全面支持
Astral3DEditor 支持超过 30 种模型格式，包括常见的 GLTF、OBJ、FBX、GLB 等通用格式，以及专业的 RVT、IFC 等 BIM 格式。
这种广泛的兼容性使得它能够无缝对接各类 3D 设计软件的输出成果。
项目的一大亮点是对 BIM 和 CAD 的深度支持：
BIM模型轻量化展示：支持 RVT/IFC 等 BIM 格式，实现了专业建筑模型的轻量化渲染
CAD图纸解析：能够直接解析 DWG/DXF 格式的 CAD 图纸，实现 2D 与 3D 的结合
所以，Astral3DEditor 可能在建筑、规划和工程可视化领域具有独特优势。
3. 扩展系统与运行时
项目设计了灵活的扩展机制：
插件系统：允许开发者扩展编辑器功能
脚本运行时：支持在场景中运行自定义脚本
粒子系统：实现各类特效和自然现象模拟
天气系统：模拟不同天气条件下的场景效果
4. 协作与存储
场景分包存储与加载：优化大型场景的加载体验
WebSocket 多人协作：支持团队实时协作编辑
云存储集成：与又拍云 USS 等服务对接
5.技术栈
Astral3DEditor 项目利用了比较前沿的前端开发技术栈：
核心框架：Vue3
3D 渲染：THREE.JS
语言：主要使用 TypeScript，部分使用 JavaScript

Astral 3D Editor 快速上手

在开始使用 Astral 3D Editor 之前，确保已经安装了以下软件和工具：
1、Node.js ：建议安装 Node.js ≥ 18.x，可以通过官方链接下载安装。
2、Yarn ：一个高效的包管理工具，可以通过官方链接进行安装。
项目克隆与安装
通过 Git 将 Astral 3D Editor 的项目代码克隆到本地：

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

使用 Yarn 安装项目依赖：

yarn install
yarn run dev

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

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

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

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

Astral 3D Editor 的开源，为 Web3D 领域注入新活力。
其功能、技术、开发难度、应用场景和开源优势，使其有望在数字孪生领域发挥重要作用，推动 Web3D 技术持续进步。

【试用地址】https://editor.astraljs.com/#/

Astral 3D Editor Github 地址：https://github.com/mlt131220/Astral3DEditor

Astral 3D Editor 在线编辑器：https://editor.astraljs.com/#/

Astral 3D Editor 官方文档：http://editor-doc.astraljs.com/

第二款：
WebGISer的福利！基于Cesium+Vue3的智慧数字

在线演示： https://coderfmc.github.io/three.js-demo/digital-farmland/#/carbon-neutral-bigscreen
源码：https://gitee.com/fu-meichuan/digital-farmland

在线演示： https://tingyuxuan2302.github.io/cesium-vue3-vite/#/
源码：https://github.com/tingyuxuan2302/cesium-vue3-vite