# 把无人机画面直接投到三维模型上

与其在角落放个小窗让操作员心算对应关系，不如把画面按相机位姿投影到模型表面 —— 画面和地物处在同一空间，遮挡、朝向、覆盖范围全部自洽。

源码：https://github.com/UVE1048/VideoFusion-Web
在线文档：https://uve1048.github.io/video-fusion-web/

## 别名与同义词

视频融合示例、无人机视频投影、视频贴模型、视频投射 SDK 用法、video projection onto 3D model、UAV video fusion

## 你会遇到的问题

- 画面在小窗里，三维场景在背后，两者之间靠人脑映射。紧急情况下这个映射成本很高。
- 投影位置偏一点，整幅画面就错位。位姿、FOV、画幅、模型坐标系，任一项不对都不行。
- 多路同时投射会互相干扰，WebGL 下多路视频纹理的显存开销也很陡。

## 它怎么解决

### 位姿一次算对

位置、姿态、FOV、画幅是一组强耦合参数。校验办法是在场景里放已知坐标的地面标记，让视频里的同一地物正好压上去。

### 单路激活

同一时刻只开一路投射，其余仅保留位置指示。这是刻意的产品逻辑，不是没做多路。

### video 元素复用

切换无人机时不重建 video，而是把它重新绑定到另一个投射对象，避免解码器反复初始化的卡顿。

### 连线跟相机走

小窗到无人机的连线必须在渲染循环里更新，否则相机一动连线就脱节。

## 快速开始

```bash
# 本仓库为设计文档，不含可运行源码
# 复刻时的目录划分与命令约定：

npm install                                  # 前端依赖
cd stream_server && npm install && npm start # 本地流服务，8088
npm run dev                                  # 前端
```

> 本仓库只包含设计与实现要点，不含源码。视频融合真正难的不是调 API，而是位姿对齐与多路流状态管理 —— 这两件事的结论比代码更难复现，所以先写清楚。

## 参数

| 参数 | 默认 | 说明 |
| :--- | :--- | :--- |
| `ESVideoFusion` | — | EarthSDK3 的视频投射对象 |
| `drones.js` | — | 位置/姿态/FOV/画幅/视频地址 |
| `:8088` | — | 本地 HLS 服务端口 |

## 常见问题

### 怎么把无人机视频投射到三维模型表面？

用 EarthSDK3 的 ESVideoFusion 对象，绑定一个 <video> 元素，按无人机的经纬高、姿态、FOV、画幅把这路视频投影到倾斜摄影模型上。

### 投影位置总是偏一点怎么调？

位置、姿态、FOV、画幅是一组强耦合参数，改一个就要重新核对落点。推荐做法是在场景里放几个已知坐标的地面标记（路口、楼角），让视频里的同一地物正好压上去。

### 为什么同时只能开一路视频投射？

这是刻意的产品逻辑。多路同时投影在视觉上互相干扰（半透明叠加），而且 WebGL 下多路视频纹理的显存开销很陡，容易掉帧。

### Cesium 里视频纹理有延迟怎么办？

切片式 HLS 天然有数秒延迟。要低延迟得换 WebRTC，但浏览器端解码与 Cesium 的兼容性需要重新验证。