05 Solution Scenarios
WebNativeBrowser 不只是用于显示网页。它把成熟 Web 生态、业务数据和 Unreal Engine 实时三维能力连接起来，特别适用于需要快速开发、频繁迭代和跨平台交付的产品。
| 层级 | 推荐职责 |
|---|---|
| Web | 页面布局、组件、图表、表格、业务流程和用户操作 |
| WebNativeBrowser | 页面承载、跨平台交互与 JS ↔ UE 连接 |
| UE 蓝图/C++ | 场景对象、镜头、三维交互、权限校验和最终业务执行 |
| 业务服务 | 数据库、API、AI 推理、账号、权限和长期数据存储 |
这种分工既能发挥 Web 的开发效率，也能保留 Unreal Engine 在实时三维、场景交互和渲染方面的优势。
数字孪生是 WebNativeBrowser 的重点应用方向，适用领域包括智慧城市、工业制造、能源、交通、园区、建筑、展厅、指挥中心和设备运维。
Web 页面适合承载：
- 设备树、资产列表和属性面板
- 实时告警、工单、巡检与事件记录
- 趋势图、统计报表、地图和筛选条件
- 登录、权限、流程和已有企业业务系统
Unreal Engine 适合承载：
- 园区、建筑、产线、设备和城市空间
- 实时三维渲染、镜头、动画与空间关系
- Actor/UObject 状态、碰撞和场景交互
通过 JS ↔ UE 消息，可以实现 "页面选择设备 — UE 镜头定位 — 场景高亮 — 状态回推报表" 的双向工作流。
图 5-2 数字孪生案例效果
Web 可以快速构建道具库、活动页、商城、任务面板、内容门户和运行时编辑工具。结合 04-高级交互 的拖拽/点击放置能力，用户可以从网页资源面板选择道具，再在 UE 世界中预览和放置。
角色、资产权限、Actor 创建、联网权威逻辑和玩法规则仍由 UE 项目负责。
图 5-3 游戏与运行时工具案例
WebNativeBrowser 可用于：
- 将 AI 辅助生成的 Vue/React 页面带入 UE
- 承载企业 AI 助手、智能问答和知识库界面
- 展示生成式设计、文本、图片或分析结果
- 将 AI 应用结果转换为受控的 UE 场景命令
- 将 UE 场景状态回传给 AI 应用界面
插件提供 Web UI 与 UE 的连接能力，不内置大语言模型、推理服务、模型账号或客户业务知识库；这些能力由客户现有 AI 服务或项目后端提供。
图 5-4 AI 应用界面案例
Web 前端拥有成熟的图表、表格、地图、筛选器、主题和响应式布局生态，适合快速制作：
- 实时监控大屏
- 经营分析报表
- 工业数据驾驶舱
- 多屏指挥中心
- 与三维场景联动的趋势和告警视图
UE 可以向页面推送场景状态，页面也可以筛选、定位或控制三维对象。报表团队和 UE 场景团队可以依据稳定的消息契约并行开发。
图 5-5 报表与数据大屏案例
- 独立完成网页原型：使用 Vue、React 或普通 HTML 项目开发页面，先在桌面 Chromium 中验证布局、表单、路由、图表、视频、iframe 和响应式尺寸。
-
设计消息契约：在接入 UE 前列出 JS 会发出哪些业务事件、UE 返回哪些结果、每条消息的数据结构、错误格式、版本号和
requestId。不要让 UI 直接依赖任意蓝图内部名称。 - 开发阶段加载前端服务器：可加载 Vite 等本地开发地址快速迭代；正式发布切换为随项目打包的静态页面、企业内网地址或正式 HTTPS 服务。
- 接入 UE：
WebNative.send("Scene.Camera.Focus", {
targetId: "device-008"
});UE 完成场景操作后回复：
FunctionName: Scene.Camera.Focus.Result
MessageBody: {"ok":true,"targetId":"device-008"}
- 分别打包验证：前端构建成功不代表 UE 发布包一定正确，每个目标平台都要验证静态资源包含、URL 路径、字体视频可访问、跨域证书策略、Development 与 Shipping 行为。
export const ueBridge = {
send(name, body = "") {
if (!window.WebNative) {
console.warn("WebNative is not ready", name);
return false;
}
window.WebNative.send(name, body);
return true;
},
on(name, handler) {
window.WebNative?.on(name, handler);
},
off(name, handler) {
window.WebNative?.off(name, handler);
}
};组件卸载时解除监听：Vue 在 onUnmounted，React 在 useEffect 的 cleanup 中调用 off。
AI 很适合生成页面骨架和组件、根据截图搭建原型、生成 CSS 主题和响应式布局、创建模拟数据、生成消息契约初稿。
AI 生成后必须人工检查：
- 第三方依赖许可证
- 是否引用外网 CDN
- XSS、HTML 注入和不安全 URL
- Token、密钥或后台地址是否写入前端
- 事件是否重复注册
- 大量 DOM 更新和无效动画
- 不同分辨率和 DPI
- Linux 字体与中文输入
- 离线部署能力
性能：
- 不要每收到一条高频消息都直接更新 DOM，合并状态后按动画帧或业务周期刷新。
- 大列表使用虚拟滚动；图表只更新变化的数据系列。
- 图片和视频走资源 URL，不通过消息体传二进制。
- 页面隐藏时暂停非必要定时器和动画；生产构建关闭无用开发日志和 Source Map 公开下载。
安全：
- 只加载可信页面；在线内容使用 HTTPS；不在网页代码中保存长期密钥。
- UE 端把 JS 消息当作外部输入，校验 FunctionName、字段、范围和权限。
- 高风险命令加入业务确认和权限检查；不因为页面运行在应用内部就绕过输入验证。
- 权限策略的全局收紧方式见 06-CEF 参数配置。
- 拖拽/点击放置实现：04-高级交互
- 消息协议与性能上限：02-双向通讯
- CEF 参数配置：06-CEF 参数配置