astral3d

项目地址： https://github.com/mlt131220/Astral3D（Vue3 + THREE.JS 的 WebGL 3D 引擎，npm 包名 astral3d）

演示： https://astral3d.com/

许可证： Apache-2.0 / MIT（视具体仓库）

概述

Astral3D 主要特性：

• 基于 Three.js / Babylon.js 的高层封装
• 场景编辑器：可视化拖拽、属性面板、节点树
• 资产管理：模型库、材质库、HDR 环境
• 动画与状态机：物体动画、相机路径、时间轴
• 交互：射线拾取、点击、悬浮、UI 弹窗
• 数据接入：MQTT、WebSocket 实时推送
• 导出：JSON 场景、glTF、嵌入 SDK

不同发行版（开源版 / 商业版 / 企业版）功能差异较大，本 SKILL 聚焦开源版与通用 SDK 用法。

---

安装

# Web SDK（npm）
# 编辑器（如有桌面版）：从官网下载

CDN：

<script src="https://cdn.jsdelivr.net/npm/astral3d/dist/astral3d.umd.js"></script>

---

入门：嵌入页面

<div id="scene" style="width:100%;height:100vh"></div>
<script type="module">
  import { Viewer } from 'astral3d';

  const viewer = new Viewer({
    container: document.getElementById('scene'),
    scene: '/scenes/factory.json',     // 由编辑器导出
    background: 'env/sky.hdr'
  });

  await viewer.load();

  // 监听点击事件
  viewer.on('pick', (obj) => console.log('clicked', obj.name));
</script>

---

场景模型

概念	说明
Scene	场景容器（场景树、灯光、相机）
Asset	资源（模型、纹理、HDR）
Entity	场景节点
Component	实体组件（Transform、Mesh、Light、Animator、Script）
Plugin	编辑器/运行时插件

---

加载模型

import { ModelLoader } from 'astral3d';

const car = await ModelLoader.load('/models/car.glb');
viewer.scene.add(car);

// 设置位置 / 旋转
car.position.set(10, 0, 0);
car.rotation.y = Math.PI / 4;

支持格式：glTF/GLB（首选）、OBJ、FBX、STL、IFC、STEP（通过 OCCT.js）。

---

场景编辑器

Astral3D 通常配套桌面/Web 编辑器：

1. 新建场景 → 选模板（空 / 工业园区 / 数据中心）
2. 拖入模型库资产
3. 编辑材质、灯光、HDR
4. 设置交互（点击事件、动画轨道）
5. 导出 .json 场景文件 → 由 Viewer 加载

---

数据驱动（IoT 实时）

import { MqttBridge } from 'astral3d';

const bridge = new MqttBridge('wss://broker:8083/mqtt');
bridge.subscribe('factory/device/+/temp', (topic, payload) => {
    const id = topic.split('/')[2];
    const dev = viewer.scene.findById(id);
    dev.userData.temp = +payload;
    dev.material.color.setHSL(0.6 - payload/100, 1, 0.5);
});