first commit
This commit is contained in:
rayd1o
460
unreal/Content/Levels/Scene_Setup_Guide.md
Normal file
460
unreal/Content/Levels/Scene_Setup_Guide.md
Normal file
@@ -0,0 +1,460 @@
|
||||
# UE5 3D 大屏场景搭建完整指南
|
||||
|
||||
## 目录
|
||||
|
||||
1. [项目初始化](#项目初始化)
|
||||
2. [安装 Cesium 插件](#安装-cesium-插件)
|
||||
3. [创建主场景](#创建主场景)
|
||||
4. [配置光照](#配置光照)
|
||||
5. [设置相机](#设置相机)
|
||||
6. [添加蓝图组件](#添加蓝图组件)
|
||||
7. [配置后端连接](#配置后端连接)
|
||||
8. [测试运行](#测试运行)
|
||||
|
||||
---
|
||||
|
||||
## 项目初始化
|
||||
|
||||
### 步骤 1: 创建 UE5 项目
|
||||
|
||||
```
|
||||
1. 打开 Epic Games Launcher
|
||||
2. 选择 Unreal Engine 5.3+ (推荐 5.4)
|
||||
3. 点击 "New Project" → "Games"
|
||||
4. 选择 "Blank" 模板
|
||||
5. 设置:
|
||||
├─ 项目名: Planet
|
||||
├─ 位置: D:\games\Planet\
|
||||
├─ 目标: Desktop / Console
|
||||
├─ 质量: Maximum
|
||||
├─ -starter content: false
|
||||
└─ raytracing: false
|
||||
6. 点击 "Create Project"
|
||||
```
|
||||
|
||||
### 步骤 2: 项目设置
|
||||
|
||||
```
|
||||
Edit → Project Settings:
|
||||
|
||||
显示设置:
|
||||
├─ Render → Default Viewport:
|
||||
│ ├─ Fullscreen Mode: Windowed
|
||||
│ ├─ Resolution: 3840×2160 (4K)
|
||||
│ └─ Custom Near Clip Plane: 100
|
||||
├─ Input:
|
||||
│ ├─ Capture Mouse on Launch: true
|
||||
│ └─ Enable Click Events: true
|
||||
└─ Quality:
|
||||
└─ Shadow Quality: High
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 安装 Cesium 插件
|
||||
|
||||
### 方法 1: 通过 Marketplace (推荐)
|
||||
|
||||
```
|
||||
1. 打开 UE5 编辑器
|
||||
2. Edit → Plugins
|
||||
3. 搜索 "Cesium for Unreal"
|
||||
4. 点击 "Enable"
|
||||
5. 重启编辑器
|
||||
```
|
||||
|
||||
### 方法 2: 手动安装
|
||||
|
||||
```
|
||||
1. 从 GitHub 下载:
|
||||
https://github.com/CesiumGS/cesium-unreal/releases
|
||||
|
||||
2. 解压到:
|
||||
D:\games\Planet\unreal\Plugins\Cesium
|
||||
|
||||
3. 编辑uproject文件:
|
||||
{
|
||||
"Plugins": [
|
||||
{
|
||||
"Name": "Cesium",
|
||||
"Enabled": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
4. 右键 Planet.uproject → "Generate Visual Studio project files"
|
||||
5. 重新打开项目
|
||||
```
|
||||
|
||||
### 配置 Cesium ion Token
|
||||
|
||||
```
|
||||
Edit → Project Settings → Cesium:
|
||||
|
||||
1. Cesium ion:
|
||||
├─ Default Access Token: 粘贴你的 token
|
||||
│ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
|
||||
└─ Default Server: https://ion.cesium.com
|
||||
|
||||
2. Cesium World Terrain:
|
||||
├─ Enable: true
|
||||
├─ Ellipsoid: WGS84
|
||||
└─ Terrain Exaggeration: 1.0
|
||||
|
||||
3. Cesium OSM Buildings:
|
||||
├─ Enable: true
|
||||
└─ Style: Gray
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 创建主场景
|
||||
|
||||
### 步骤 1: 创建新关卡
|
||||
|
||||
```
|
||||
1. File → New Level → Default
|
||||
2. 删除默认的:
|
||||
├─ Floor
|
||||
├─ Wall_400
|
||||
├─ Wall_400x400
|
||||
└─ PlayerStart
|
||||
3. 保存为: Content/Levels/Main.umap
|
||||
4. 设置为启动关卡:
|
||||
Edit → Project Settings → Maps & Modes
|
||||
└─ Default Level Name: Main
|
||||
```
|
||||
|
||||
### 步骤 2: 添加 Cesium 组件
|
||||
|
||||
从 "Cesium" 面板拖入:
|
||||
|
||||
```
|
||||
1. CesiumGeoreference
|
||||
└─ 位置: (0, 0, 0)
|
||||
└─ 属性: 自动设置
|
||||
|
||||
2. CesiumWorldTerrain
|
||||
└─ 位置: (0, 0, 0)
|
||||
└─ 属性:
|
||||
├─ Enable Collision: false
|
||||
└─ Create Pawns: false
|
||||
|
||||
3. CesiumSunSky
|
||||
└─ 位置: (0, 0, 0)
|
||||
└─ 属性:
|
||||
├─ Use Solar Time: true
|
||||
└─ Solar Time: 2024-01-01 12:00:00
|
||||
```
|
||||
|
||||
### 步骤 3: 配置地球位置
|
||||
|
||||
```
|
||||
选中 CesiumGeoreference:
|
||||
|
||||
├─ Origin Location:
|
||||
│ ├─ Latitude: 0
|
||||
│ ├─ Longitude: 0
|
||||
│ └─ Height: 0
|
||||
│
|
||||
├─ Target Viewport:
|
||||
│ ├─ Width: 3840
|
||||
│ └─ Height: 2160
|
||||
│
|
||||
└─ Camera:
|
||||
└─ Default Camera Class: None
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 配置光照
|
||||
|
||||
### 步骤 1: 设置太阳光照
|
||||
|
||||
```
|
||||
选中 CesiumSunSky:
|
||||
|
||||
├─ Atmospheric Sun Light:
|
||||
│ └─ 指向 DirectionalLight_Sun
|
||||
│
|
||||
├─ Direction:
|
||||
│ ├─ Azimuth: 180
|
||||
│ └─ Altitude: 45
|
||||
│
|
||||
├─ Sky Light:
|
||||
│ └─ Sky Light Actor → SkyLight
|
||||
│
|
||||
└─ Atmospheric Fog:
|
||||
├─ Fog Density: 0.02
|
||||
├─ Fog Falloff: 0.2
|
||||
└─ Volumetric Fog: true
|
||||
```
|
||||
|
||||
### 步骤 2: 添加辅助光照
|
||||
|
||||
```
|
||||
1. 添加 DirectionalLight_Sun:
|
||||
├─ Intensity: 10 lux
|
||||
├─ Light Color: (1, 0.95, 0.8)
|
||||
└─ Cast Shadows: true
|
||||
|
||||
2. 添加 Skylight:
|
||||
├─ Intensity: 1.0
|
||||
├─ Color: (0.5, 0.7, 1.0)
|
||||
└─ Real-time Capture: false
|
||||
```
|
||||
|
||||
### 步骤 3: 后处理
|
||||
|
||||
```
|
||||
添加 PostProcessVolume (Unbound):
|
||||
|
||||
├─ Exposure:
|
||||
│ ├─ Min EV100: 10
|
||||
│ ├─ Max EV100: 20
|
||||
│ ├─ Speed Up: 2
|
||||
│ ├─ Speed Down: 2
|
||||
│ └─ Target EV100: 12
|
||||
│
|
||||
├─ Bloom:
|
||||
│ ├─ Intensity: 1.0
|
||||
│ ├─ Threshold: 1.0
|
||||
│ └─ Method: Convolution
|
||||
│
|
||||
├─ Color Grading:
|
||||
│ ├─ Saturation: (1, 1, 1)
|
||||
│ ├─ Contrast: 1.0
|
||||
│ └─ Gamma: 1.0
|
||||
│
|
||||
└─ Vignette:
|
||||
└─ Intensity: 0.5
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 设置相机
|
||||
|
||||
### 步骤 1: 创建相机控制器
|
||||
|
||||
```
|
||||
创建 Blueprint: BP_CameraController (父类: Actor)
|
||||
|
||||
组件:
|
||||
├─ SceneRoot
|
||||
│ └─ SpringArm
|
||||
│ └─ Camera
|
||||
│
|
||||
变量:
|
||||
├─ TargetRadius: Float = 500000
|
||||
├─ ZoomSpeed: Float = 50000
|
||||
├─ RotateSpeed: Float = 1.0
|
||||
└─ bIsRotating: Boolean = false
|
||||
```
|
||||
|
||||
### 步骤 2: 配置相机移动
|
||||
|
||||
```
|
||||
输入绑定 (Edit → Project Settings → Input):
|
||||
|
||||
├─ Mouse X:
|
||||
│ └─ Event: Rotate Yaw
|
||||
│ └─ Add Controller Yaw Input × -1
|
||||
│
|
||||
├─ Mouse Y:
|
||||
│ └─ Event: Rotate Pitch
|
||||
│ └─ Add Controller Pitch Input × -1
|
||||
│
|
||||
├─ Mouse Wheel:
|
||||
│ └─ Event: Zoom
|
||||
│ ├─ Add Controller Zoom In (放大)
|
||||
│ └─ Add Controller Zoom Out (缩小)
|
||||
│
|
||||
└─ Right Mouse Button:
|
||||
├─ Event: 按下 → bIsRotating = true
|
||||
└─ Event: 松开 → bIsRotating = false
|
||||
```
|
||||
|
||||
### 步骤 3: 自动巡航
|
||||
|
||||
```
|
||||
创建 Timeline: AutoRotate
|
||||
|
||||
├─ 持续时间: 60秒
|
||||
├─ 循环: true
|
||||
└─ 曲线:
|
||||
0%: 0
|
||||
100%: 360
|
||||
|
||||
Tick Event:
|
||||
├─ 分支: bAutoRotate == true
|
||||
│ ├─ Play Timeline
|
||||
│ └─ Add Controller Yaw Output
|
||||
└─ 否则: 跳过
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 添加蓝图组件
|
||||
|
||||
### 步骤 1: 放置 GlobeController
|
||||
|
||||
```
|
||||
1. 从 Content Browser 拖入 BP_GlobeController
|
||||
2. 位置: (0, 0, 0)
|
||||
3. 确保 CesiumGeoreference 在其下
|
||||
```
|
||||
|
||||
### 步骤 2: 设置初始相机
|
||||
|
||||
```
|
||||
1. 在 World Outliner 中选择 Camera
|
||||
2. 设置位置:
|
||||
├─ X: 0
|
||||
├─ Y: -2000000
|
||||
└─ Z: 1000000
|
||||
3. 设置旋转:
|
||||
├─ Pitch: -30
|
||||
└─ Yaw: 0
|
||||
```
|
||||
|
||||
### 步骤 3: 配置数据管理器
|
||||
|
||||
```
|
||||
选中 BP_GlobeController:
|
||||
|
||||
├─ API_URL: http://localhost:8000
|
||||
├─ WS_URL: ws://localhost:8000/ws
|
||||
├─ UpdateInterval: 30.0
|
||||
├─ bAutoRotate: true
|
||||
└─ RotateSpeed: 0.5
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 配置后端连接
|
||||
|
||||
### 步骤 1: 测试后端服务
|
||||
|
||||
```bash
|
||||
# 在 WSL 中启动后端
|
||||
cd /home/ray/dev/linkong/planet
|
||||
docker restart planet_backend_new
|
||||
|
||||
# 测试 API
|
||||
curl http://localhost:8000/api/v1/collected/summary
|
||||
```
|
||||
|
||||
### 步骤 2: 配置 CORS (如果需要)
|
||||
|
||||
```
|
||||
后端已配置 CORS:
|
||||
├─ http://localhost:3000
|
||||
├─ http://0.0.0.0:3000
|
||||
└─ http://frontend:3000
|
||||
```
|
||||
|
||||
### 步骤 3: 测试 WebSocket
|
||||
|
||||
```
|
||||
在 UE5 蓝图中:
|
||||
|
||||
1. 创建 WebSocket 连接
|
||||
└─ URL: ws://localhost:8000/ws
|
||||
|
||||
2. 发送订阅消息:
|
||||
{
|
||||
"action": "subscribe",
|
||||
"channels": ["updates", "alarms"]
|
||||
}
|
||||
|
||||
3. 监听消息并处理
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 测试运行
|
||||
|
||||
### 步骤 1: 编译蓝图
|
||||
|
||||
```
|
||||
1. 点击工具栏 "Compile" 按钮
|
||||
2. 检查错误日志
|
||||
3. 修复任何错误
|
||||
```
|
||||
|
||||
### 步骤 2: 运行测试
|
||||
|
||||
```
|
||||
1. 点击 "Play" 按钮
|
||||
2. 检查:
|
||||
├─ 地球是否正常显示
|
||||
├─ Cesium 地形是否加载
|
||||
├─ 太阳光照是否正确
|
||||
└─ 相机控制是否工作
|
||||
|
||||
3. 打开输出日志检查错误
|
||||
```
|
||||
|
||||
### 步骤 3: 打包发布
|
||||
|
||||
```
|
||||
1. File → Package Project → Windows (64-bit)
|
||||
2. 选择输出目录: D:\games\Planet\Dist\
|
||||
3. 等待打包完成
|
||||
4. 测试打包后的可执行文件
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q1: Cesium 地形不显示
|
||||
|
||||
```
|
||||
解决方案:
|
||||
1. 检查 Cesium ion Token 是否正确
|
||||
2. 检查网络连接
|
||||
3. 确认 CesiumWorldTerrain 已启用
|
||||
4. 查看输出日志错误信息
|
||||
```
|
||||
|
||||
### Q2: 相机控制不工作
|
||||
|
||||
```
|
||||
解决方案:
|
||||
1. 确保 PlayerController 启用输入
|
||||
2. 检查输入绑定是否正确
|
||||
3. 确认相机组件已附加
|
||||
4. 检查是否有其他 Actor 捕获输入
|
||||
```
|
||||
|
||||
### Q3: WebSocket 连接失败
|
||||
|
||||
```
|
||||
解决方案:
|
||||
1. 检查后端服务是否运行
|
||||
2. 确认 CORS 配置正确
|
||||
3. 检查防火墙设置
|
||||
4. 验证 URL 格式正确
|
||||
```
|
||||
|
||||
### Q4: 性能问题
|
||||
|
||||
```
|
||||
解决方案:
|
||||
1. 降低渲染分辨率
|
||||
2. 禁用不必要的特效
|
||||
3. 减少粒子数量
|
||||
4. 使用 LOD
|
||||
5. 启用虚拟纹理
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 下一步
|
||||
|
||||
1. **添加数据点** - 创建 BP_Supercomputer 实例
|
||||
2. **添加海缆** - 创建 BP_SubmarineCable 实例
|
||||
3. **添加数据流** - 创建 BP_DataFlow 实例
|
||||
4. **配置 UI** - 添加 W_MainHUD 等界面
|
||||
5. **优化性能** - 根据实际运行调整
|
||||
Reference in New Issue
Block a user