WebNativeBrowser高级交互

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

关注

原创最新推荐文章于 2026-11-04 10:16:39 发布 355 阅读 AI 写同款· GEO 优化 ›

04 高级交互

本章介绍 WebNativeBrowser 的高级交互能力：从 Web 拖拽/点击放置到 UE 场景，以及鼠标穿透、DevTools 调试等进阶用法。

把 Web 页面变成资产库、道具栏、建筑目录、设备列表或运行时编辑工具，并把用户的选择自然衔接到 UE 游戏视口：

插件职责与项目职责的边界：

层级	职责
WebNativeBrowser	跨 Web/UE 的消息、焦点与光标空间基础能力
项目蓝图/C++	创建哪个 Actor、是否允许放置、放置位置、联网同步

在这里插入图片描述

WebNative.send("DragModel", {
  modelId: "cube",
  modelName: "Cube",
  modelPath: "/Engine/BasicShapes/Cube.Cube",
  action: "drag_start"
});

以上消息体取自示例页面 3_digitaltwin.html（Content/webnative/html/）的模型点击通知，字段含义见第 5 节；业务名称可按项目消息规范修改。

在这里插入图片描述

拖拽期间只更新一个预览对象，不要随鼠标移动重复创建 Actor；高频移动状态也不需要逐条修改 Web DOM。

接口	用途
`WebNative.send(functionName, messageBody)`	Web 向 UE 发送选中资源和业务命令
`SetFocusToGameViewport()`	将输入焦点从页面切换到 UE 游戏视口
`GetRawPlatformCursorPos(OutScreenPos)`	Tick更新平台光标的屏幕坐标
`DeprojectCursorToWorld(ScreenPos, OutWorldPos, OutWorldDir)`	Tick将屏幕坐标转换为世界空间射线

这些接口均可用于蓝图工作流；C++ 项目也可以调用对应公开函数（见 03-WebNativeWidget 参数配置第 7 节）。

{
  "modelId": "cube",
  "modelName": "Cube",
  "modelPath": "/Engine/BasicShapes/Cube.Cube",
  "action": "drag_start"
}

modelId / modelName：稳定的业务标识与展示名称，来自页面元素的 data-model-id / data-model-name。
modelPath：UE 资产路径（data-model-path）。项目侧必须把允许的 modelPath 映射到受控资源，不要让网页传入任意本地文件路径或任意 UE 对象路径。
action：动作标记（drag_start 表示点击/拖拽开始），可按需扩展 drag_confirm、drag_cancel 等。

当页面存在透明区域时，可配合 Widget 的鼠标穿透参数实现"网页与 UE 场景共存"的交互：

参数完整说明见 03-WebNativeWidget 参数配置第 4 节。

开发阶段我们想像浏览器一样F12进行调试工作，增加断点可以通过网页任意区域进行ctrl+F12快捷键打开调试窗口，启动当前机器默认浏览器进行调试工作
在这里插入图片描述

资源	用途
`Plugins/WebNativeBrowser/Content/webnative/html/3_digitaltwin.html`	数字孪生前端案例：模型点击/拖拽通知、`data-model-id` / `data-model-path` 属性规范、属性面板、设备树实现
`Plugins/WebNativeBrowser/Content/webnative/Blueprints/BP_DemoScene`	蓝图示例：解析 `DragModel` 消息、`SetFocusToGameViewport` 切换焦点、`DeprojectCursorToWorld` 反投影、Tick 更新预览 Actor