WebNativeBrowser基础案例应用方向

StarTechnology

墨衍会员 · AI 创作全网分发码龄96天

关注

原创最新推荐文章于 2026-11-06 17:04:23 发布 309 阅读 AI 写同款· GEO 优化 ›

【UE5.3】不用插件实现HTTP、Websocket客户端纯C++代码实现HTTP、Websocket客户端，并通过蓝图完成调用并测试阅读详情

05 案例介绍

WebNativeBrowser 不只是用于显示网页。它把成熟 Web 生态、业务数据和 Unreal Engine 实时三维能力连接起来，特别适用于需要快速开发、频繁迭代和跨平台交付的产品。

1. 推荐架构分工

层级	推荐职责
Web	页面布局、组件、图表、表格、业务流程和用户操作
WebNativeBrowser	页面承载、跨平台交互与 JS ↔ UE 连接
UE 蓝图/C++	场景对象、镜头、三维交互、权限校验和最终业务执行
业务服务	数据库、API、AI 推理、账号、权限和长期数据存储

这种分工既能发挥 Web 的开发效率，也能保留 Unreal Engine 在实时三维、场景交互和渲染方面的优势。

2. 数字孪生

数字孪生是 WebNativeBrowser 的重点应用方向，适用领域包括智慧城市、工业制造、能源、交通、园区、建筑、展厅、指挥中心和设备运维。

Web 页面适合承载：

设备树、资产列表和属性面板
实时告警、工单、巡检与事件记录
趋势图、统计报表、地图和筛选条件
登录、权限、流程和已有企业业务系统

Unreal Engine 适合承载：

园区、建筑、产线、设备和城市空间
实时三维渲染、镜头、动画与空间关系
Actor/UObject 状态、碰撞和场景交互

通过 JS ↔ UE 消息，可以实现 “页面选择设备 — UE 镜头定位 — 场景高亮 — 状态回推报表” 的双向工作流。

在这里插入图片描述

3. 游戏与运行时工具

Web 可以快速构建道具库、活动页、商城、任务面板、内容门户和运行时编辑工具。结合 04-高级交互的拖拽/点击放置能力，用户可以从网页资源面板选择道具，再在 UE 世界中预览和放置。

角色、资产权限、Actor 创建、联网权威逻辑和玩法规则仍由 UE 项目负责。

图 5-3 游戏与运行时工具案例

4. AI 应用界面

WebNativeBrowser 可用于：

将 AI 辅助生成的 Vue/React 页面带入 UE
承载企业 AI 助手、智能问答和知识库界面
展示生成式设计、文本、图片或分析结果
将 AI 应用结果转换为受控的 UE 场景命令
将 UE 场景状态回传给 AI 应用界面

插件提供 Web UI 与 UE 的连接能力，不内置大语言模型、推理服务、模型账号或客户业务知识库；这些能力由客户现有 AI 服务或项目后端提供。

在这里插入图片描述

5. 报表与数据大屏

Web 前端拥有成熟的图表、表格、地图、筛选器、主题和响应式布局生态，适合快速制作：

实时监控大屏
经营分析报表
工业数据驾驶舱
多屏指挥中心
与三维场景联动的趋势和告警视图

UE 可以向页面推送场景状态，页面也可以筛选、定位或控制三维对象。报表团队和 UE 场景团队可以依据稳定的消息契约并行开发。

在这里插入图片描述

6. Vue / React 工程化工作流

6.1 开发流程

独立完成网页原型：使用 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 行为。

6.2 推荐前端封装

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);
  }
};