# CloudRenderEngine

CloudRenderEngine 是由百度地图开放平台FE团队推出的基于一个基于Unreal Engine 5 引擎封装的JavaScript API三维孪生SDK，支持前端开发人员快速完成实时三维数字孪生系统的开发，构建智慧城市、交通、文旅、园区、元宇宙、BIM等场景业务应用。

开发者使用 CloudRenderEngine 提供的丰富 API 可以完成全球级别的球面和平面三维场景实时高性能渲染、三维场景交互、移动端高性能渲染和交互、各类点线面动态数据可视化展示、巡航、模型单体化应用、路侧资产数据挂接、地图路径规划、实时信号灯、路名、POI，全球实时路况等功能。CloudRenderEngine 降低了 UE 研发的门槛，提升数字孪生场景构建的效率，是一款具备强地图能力、大规模场景渲染、效果高保真、强业务支撑的数字孪生引擎 SDK。

---

## 📚 API 文档

[点击访问 API 文档](https://mapv.baidu.com/mapvunreal/docs/AssetLayer.html)

---

## 🚀 开始使用

### 1️⃣ 接入 MapV CloudRenderEngine

#### 通过 npm 引入
```bash
npm install mapv-cloudrenderengine
```

---

### 2️⃣ Hello World 示例

CloudRenderEngine 支持两种引擎连接模式：
1. **单机像素流模式**
2. **调度服务模式**

#### 单机像素流模式

```javascript
axios.get('http://10.18.165.2:8889/streamer?project=' + name);  
const engine = new Engine.CloudRenderEngine({
    wsUrl: wsUrl, // 重要参数
    isShowTestUI: false,
    connectOnLoad: true,
    shouldShowPlayOverlay: false,
    matchViewportResolution: true,
});

// 渲染场景。 此时可以开启一个加载动画
engine.load();

const handleEngineLoaded = () => {
    // 执行这个事件后代表资源加载完
    // 加载完成才可以使用 engine 的一系列方法
    // 此时可以关闭加载动画
};

const disconnected = () => {
    // 服务连接异常时会回调此方法
};

engine.addEventListener('videoInitialised', handleEngineLoaded);
engine.addEventListener('signalingServerError', disconnected);
```

[查看详细文档](https://mapv.baidu.com/mapvunreal/docs/singlePixel.html)

---

#### 调度服务模式

```javascript
import { CloudRenderEngine } from '@baidu/cloudrenderengine';

// 配置调度服务 host 必须
CloudRenderEngine.DispatchServer.host = 'http://10.18.165.2:8889';
// 设置要调度的集群 tag 可选
CloudRenderEngine.DispatchServer.tag = 'online';

// 设置用户名和密码 可选，默认都是 admin
Engine.CloudRenderEngine.DispatchServer.username = 'maptest';
Engine.CloudRenderEngine.DispatchServer.password = 'maptest';

CloudRenderEngine.DispatchServer.GetAllCapacity()
    .then(capacity => {
        if (capacity > 0) {
            // 可以连接了  
        }
    });

const engine = new CloudRenderEngine({
    isShowTestUI: false,
    connectOnLoad: true,
    shouldShowPlayOverlay: false,
    // consul 里配置的英文项目名称
    projectName: 'beijing',
});

const onSuccessed = message => {
    // 调度成功
};

const onLoadError = error => {
    // 调度失败，此处会给出具体原因，比如权限不足、可用调度容量不足、用户名或者密码错误、已达到该用户的最大连接数等。
};

// 渲染场景。调用 GetAllCapacity 检查 capacity 大于 0 后才可以
engine.load(onSuccessed, onLoadError);

const handleEngineLoaded = () => {
    // 执行这个事件后代表资源加载完
    // 加载完成才可以使用 engine 的一系列方法
};

const disconnected = () => {
    // 服务连接异常时会回调此方法
};

engine.addEventListener('videoInitialised', handleEngineLoaded);
engine.addEventListener('signalingServerError', disconnected);
```

[查看详细文档](https://mapv.baidu.com/mapvunreal/docs/schServer.html)

---

## 🛠️ 常见问题

### 如何获取更多支持？
- 访问 [官方文档](https://mapv.baidu.com/mapvunreal/docs/AssetLayer.html)
- 联系技术支持团队

---