【UE4】【UI】在三维世界中和UI交互

最新推荐文章于 2022-03-07 11:52:57 发布

原创最新推荐文章于 2022-03-07 11:52:57 发布 · 1.1w 阅读

62 ·

CC 4.0 BY-SA版权

文章标签：

#UE4 #UI

Ue4 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在VR环境中实现UI交互的方法。通过使用UE4的Widget组件和WidgetInteraction组件，可以实现在3D世界中显示并交互UI。具体步骤包括创建Actor、添加Widget组件、绑定WidgetInteraction组件等。

首先。

VR环境下不可能也不被允许在头盔屏幕上出现UI并进行交互。

那为了能愉快的搞事情，必然需要有什么途径在虚拟环境中实现UI及其交互。

在开始之前，请先看以下官方文档和教程。

第一篇：创建 3D 控件交互

第二篇：创建一个可进行交互并提供文本框输入的小键盘

具体思路是这样。

为了能在3D世界内显示UI，那么这个“UI”必然是Actor。在UE4中我们能通过控件蓝图创建一系列UI。那如何让这两个关联呢？

此时就要引入两个很重要的组件。

一是Widget。用来作为UI的载体。

二是WidgetInteraction。是一条射线，用来和UI交互。

首先看Widget。

新建一个Actor>>添加组件Widget>>Widget Class 选择我们要实现的UI控件蓝图。

之后根据实际需要设置下Draw Size的尺寸。然后将这个Actor丢到世界中去，就能看到UI了。

已经有了UI，但现在我们只能看看，还不能交互。

为了达成这个目的，需要在手柄上绑定另一个组件WidgetInteraction。

其实本质很简单，就是一条射线碰撞检测。

关键在这里。

press pointer key这个函数即是使我们按下扳机模拟鼠标左键按下的方法。

详细的见这里。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Carl0v0

关注关注

9
点赞
踩
62

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ue4 对3dwidget的通信_UE4创建3D小部件按钮交互

weixin_42398050的博客

12-23

1292

传统的用户界面由位于二维或三维世界顶部的二维空间(例如，菜单，状态指示器或显示结果)组成。但是，有时您可能希望在三维环境中拥有一个可供玩家进行交互的用户界面元素(键盘，虚拟菜单，清单或交互式界面的其他元素)。这在VR项目中更为常见，UMG支持使用Widget Interaction组件进行这些类型的交互。incg影动UE4提供步骤对于本教程，我们使用启用了Starter Content的Bluep...

【UE4】WidgetInteraction关闭ShowDebug并添加光标

为尔归来

08-22

1335

用UE4进行VR开发或者其他涉及到3D交互操作的时候，会用到WidgetInteraction，调试的时候会有一条大红线，但是一旦发布后，大红线就没有了，也没有一个指针来提示当前光标在哪里。此笔记教大家如何关闭Debug（去掉大红线），为交互添加一个光标思路：在WidgetInteraction与UI交互的地方显示一个光标步骤一：WidgetInteraction 同一层级添加一个光标组件（此处命名为InteractionSphere），StaticMesh就行了，自定义...

参与评论您还未登录，请先登录后发表或查看评论

UE4 UI扩展插件

03-23

UE4原生的ui编辑功能过于弱小，这个插件可以实现很多常用的UI功能，比如富文本，序列帧动画等等支持的UE4版本4.16-4.18 最新的4.21测试基本能用。

UE4之VR手柄和3D UI控件如何交互

YuJie1996

12-18

5876

1. https://blog.youkuaiyun.com/Clarence0v0/article/details/79204223 （在三维世界中和UI交互） 2. https://docs.unrealengine.com/zh-CN/Engine/UMG/HowTo/VirtualKeyboards/index.html （创建虚拟键盘交互） 3. https://docs.unreale...

[UE4笔记] 3DUI空间交互

weixin_44052668的博客

08-05

1266

在Actor中使用widget的时候制作3DUI，如果直接选择World模式鼠标和UI是无法产生交互的，只要勾选了红框里的选项就可以正常交互了(老是忘记，所以写个笔记记录一下)。输入控制台命令showflagcollision 1 查看你的Widget的碰撞并确认你是否点击到了你的widget。***注意：***如果你还是点击不到。

UE4的3DUI交互（WidgetInteractionComponents）

weixin_43704737的博客

10-30

8997

效果：过程

UE4 CanvasUI遮罩

05-30

3. 遮罩与碰撞检测：结合物理引擎，遮罩还可以用于实现基于碰撞的UI交互，例如只在角色触碰到特定区域时显示特定UI元素。五、实践案例 1. 游戏菜单：在游戏暂停或主菜单中，经常使用遮罩来半透明地覆盖游戏画面，...

精选资源

UE4.26插件WebUI

08-11

这个插件的核心功能在于提供了一个桥梁，让开发者可以利用HTML5、CSS3和JavaScript等前端技术来创建用户界面，这些界面可以直接在UE4的三维环境中运行，无需离开游戏或应用环境。这样的设计极大地拓展了UE4的应用...

UE4官方文档UI学习：5.UMG 创建3D控件交互

...

03-08

6757

最近开始学习UE4，整理了一下UE4的UMG官方文档的主要内容。目录： UE4官方文档UI学习：1.UMG UI设计器快速入门 UE4官方文档UI学习：2.UMG 创建主菜单 UE4官方文档UI学习：3.UMG 创建暂停菜单 UE4官方文档UI学习：4.UMG 创建控件模板 UE4官方文档UI学习：5.UMG 创建3D控件交互 1 - 编写控件交互脚本 1.在 Content > ...

UE4程序嵌入WINFORM

07-19

这种技术可以为桌面应用带来丰富的三维可视化和交互体验。 UE4是Epic Games开发的一款开源的、基于C++的实时3D创作工具，广泛应用于游戏开发、影视制作、建筑设计等多个领域。它的强大在于其高效的图形渲染、物理...

UE4 UI简单例子 C++

09-13

一个简单实现点击按钮更换图片的UE4C++代码例子，例子很简洁，使用到了简单的UI创建、类型转换等等相关常用的UE4中需要的方法

MeshWidgets:用于StaticMesh表面上的UMG和Slate小部件的UE 4.13插件

05-05

网格小部件弯曲的3D曲面或疯狂的物件上的小部件。包括： UMeshWidgetComponent，类似于UWidgetComponent，但在静态网格物体表面上 UMeshWidgetInteractionComponent，与UWidgetInteractionComponent相同，但可与网格小部件和普通小部件一起使用要求： UE 4.20 紫外线命中测试项目设置（“物理”>“优化”>“从命中结果支持紫外线”）已打勾安装： C ++：重新生成项目文件并添加到您的Build.cs中仅适用于蓝图：将Plugins文件夹复制到您的项目中。（针对4.20构建的拖放式二进制文件。OWN OWN RISK通常不会运行您从互联网上获得的随机二进制文件）

基于虚幻4引擎的三维游戏开发实践

02-25

虚幻4引擎是Epic Games开发的一款强大的实时三维创作工具，广泛应用于游戏开发、影视制作、建筑设计等多个领域。本实践教程旨在深入探讨如何利用虚幻4进行三维游戏的开发，结合相关参考文献，帮助读者从基础到进阶，...

UE4/VR/3DUI交互---动态弹出、动态视角跟随、防遮挡显示以及射线交互

New_WTF的博客

03-07

7975

VR/3DUI交互—动态弹出、动态视角跟随、防遮挡显示以及射线交互 VR3DUI交互实现（都是一些简单功能简单记录一下，最后附视频效果）一、动态弹出新建弹出事件，通过Timeline控制3DUI的Pitch（Y）轴；基本的蓝图类，初始化啥的就不赘述了；话不多说，上图。这里需要先将3DUI设为Pawn的子对象；通过Alpha值设置角度；优化弹出效果，TimeLine可以做个曲线; 二、动态跟随写在Tick事件里，Delta是限制角度，当视角跟3DUI角度偏差大于这个数值，就执行后续跟随跟随代码，直到角

Unreal Engine 4 HTC Vive UI交互流程

什么风把您给吹来了

06-27

3686

1.项目的基本设置。 1>.新建项目打开后找到Edit ---ProjectStettings ---Rendering 找到 VR的选项卡InstancedStereo（立体化渲染设置为True）这时候项目会重新启动 2>. 添加后期盒子找到Modes---Volumes----PostProcessVolume ，添加以后要把 Post Process Volime 选项下的Unb

ue4 3dui交互相关

N的专栏

10-26

6532

1 新建一个Actor蓝图，上面加上Widget控件，widget Class选择任意ui蓝图，把这个actor蓝图放到场景任意合适位置 2 在合适位置(比如主角的相机上，武器上)添加Widget Interaction控件，这个用来触发3dUI交互调试时可以把Widget Interaction上的show debug打开，可以看到从widget Interaction射出

[UE4] UI部分

selfsongs

11-17

4005

UE 4 UI部分参考UMG基础3D UIUI适配参考 UMG UI设计器快速入门 UE4入门之路（UI篇）：UMG系统介绍关卡蓝图UI UMG基础虚幻示意图形界面设计器（Unreal Motion Graphics UI Designer）(UMG) 是一个可视化的UI创作工具，可以用来创建UI元素，如游戏中的HUD、菜单或您希望呈现给用户的其他界面相关图形。 UMG的核心是控件，这些控件是一系列预先制作的函数，可用于构建界面（如按钮、复选框、滑块、进度条等）。这些控件在专门的控件蓝图中编辑，该蓝图

UE4_3DWidget界面交互

qq_33382868的博客

12-02

2568

UE4_3DWidget界面交互问题用到的3DWidget不在固定地点显示时，遇到了一个问题，当3DWidget出现在有物体重叠时，WidgetInteraction检测不到3DWidget界面。解决方法创建一个TraceChannel检测通道，默认Ignore，将3DWidget的碰撞设置为只对TraceChannel里的自己创建的通道阻挡，WidgetInteraction的TraceChannel也设置为这个通道，这样WidgetInteraction就可以穿过其他物体检测到场景中的3DWid

UE4 蓝图教程(四) UI

最新发布

09-17

<think> 我们正在处理用户查询：查找UE4数字孪生场景中Echarts图表、WebUI与JS和UE进行交互的相关内容。用户特别关注Echarts图表、WebUI与JS和UE的交互方法。根据引用资料，特别是引用[2]和引用[3]：引用[2]提到：利用实时云渲染技术（如LarkXR）和其WebSDK以及数据通道插件，可以实现二维管理系统（可能包含Echarts图表）与数字孪生三维可视化程序（UE）的无缝交互。具体来说，用户可以在业务系统中操作时实时看到云渲染画面的响应，同时操作云渲染画面也能反馈到业务系统。引用[3]提到：在UE4数字孪生模型中，通过csv导入建筑数据信息构建DataTable，创建建筑分层界面和建筑信息界面，并实现点击层数与相应建筑信息匹配，传感器数据传入数据库并连接Echarts图表。此外，还提到了通过设置移动实现建筑分层、建筑弹出效果，以及点击楼层进行视角转换、楼层弹出、数据展示。后续拓展包括利用opencv接入监控摄像头、Mqtt协议构建传感器与UE交互、接入MySQL数据库。因此，我们可以推断，在UE4数字孪生场景中，Echarts图表、WebUI与JS和UE的交互可能涉及以下技术点： 1. 使用WebSDK（如LarkXR提供的WebSDK）来嵌入云渲染的UE应用，并实现双向通信。 2. 利用数据通道插件在Web前端（JS）和UE应用之间传递数据。 3. 在Web前端使用Echarts展示从数据库或实时传感器数据中获取的信息，并通过数据通道将用户操作（如点击图表）传递到UE，同时UE中的事件（如点击楼层）也可以触发Web前端更新图表。具体交互方法可能包括： - 前端（WebUI）通过WebSDK与云渲染的UE实例建立连接。 - 使用数据通道发送和接收消息，例如： - 从WebUI发送命令到UE（如跳转到特定视角、显示特定楼层信息） - 从UE发送数据到WebUI（如当前选中的楼层、传感器实时数据）以便更新Echarts图表。下面我们将详细解释交互方法：步骤1：嵌入UE应用引用[2]提到，使用实时云渲染技术（如LarkXR）将UE应用以像素流的方式嵌入到Web页面中。这通常通过一个<iframe>或者使用WebSDK提供的播放器组件实现。步骤2：建立通信通道在Web页面中，通过WebSDK初始化播放器，并建立数据通道。例如，LarkXR的WebSDK提供了创建数据通道的方法，允许在Web和UE应用之间发送自定义消息。步骤3：双向数据传递 - 从Web到UE：例如，当用户在Echarts图表上点击某个数据点时，通过JS事件捕获，然后通过数据通道发送消息到UE，UE端接收到消息后执行相应的操作（如镜头移动到对应设备位置）。 - 从UE到Web：在UE中，当用户点击场景中的某个物体（如设备或楼层）时，UE会触发一个事件，该事件通过数据通道发送消息到Web前端，Web前端收到消息后更新Echarts图表（例如，显示该设备的详细数据）。步骤4：数据同步为了实现实时数据展示，通常需要从数据库（如MySQL）或实时数据源（如MQTT）获取数据。这些数据可以通过后端服务提供给前端，前端用Echarts渲染。同时，这些数据也可以通过数据通道同步给UE，用于更新场景中的状态（如设备运行状态）。引用[3]中提到的“传感器数据传入数据库，连接Echarts图表”表明：传感器数据通过某种方式（如MQTT）被采集并存入数据库，然后通过Web后端API提供给前端，前端使用Echarts展示。同时，这些数据也可能被发送到UE中以更新数字孪生体的状态（例如，改变设备模型的颜色表示状态）。具体实现技术： - Web前端：使用JavaScript，可能搭配Vue、React等框架，使用Echarts库绘制图表。 - 通信：使用WebSocket或HTTP长轮询实现实时数据更新。对于Web与UE的通信，使用云渲染SDK提供的数据通道（通常是基于WebSocket）。 - UE端：需要编写相应的逻辑来接收和发送数据通道的消息（通常通过蓝图或C++实现）。因此，我们可以总结出以下交互方法：方法1：使用云渲染SDK的数据通道 - 在Web页面中，通过SDK创建数据通道，并监听UE发来的消息，同时提供向UE发送消息的方法。 - 在UE中，使用对应的插件（如LarkXR提供的插件）来接收和发送消息。示例伪代码（Web端）： ```javascript // 初始化播放器 const player = new LarkXR.Player({ ... }); // 创建数据通道 const dataChannel = player.createDataChannel('my-channel'); // 监听来自UE的消息 dataChannel.onMessage((message) => { // 解析消息，更新Echarts图表 const data = JSON.parse(message); myChart.setOption(updateOption(data)); }); // 当Echarts图表有点击事件时，发送消息到UE myChart.on('click', (params) => { // 发送消息到UE，例如告诉UE要聚焦到某个设备 dataChannel.send(JSON.stringify({ command: 'focus', deviceId: params.data.deviceId })); }); ``` 方法2：通过后端服务中转如果不用云渲染SDK的数据通道，也可以考虑通过后端服务进行中转。例如： - Web前端通过WebSocket或HTTP与后端通信。 - UE应用也通过TCP/UDP或HTTP与后端通信。 - 后端作为中间人转发消息。但是这种方法延迟较高，且需要额外的后端开发。而使用云渲染SDK的数据通道通常具有更低的延迟和更简单的集成。根据引用[2]和引用[3]的内容，第一种方法是更直接和高效的。另外，引用[3]提到“通过设置移动实现建筑分层、建筑弹出效果”以及“点击楼层进行视角转换、楼层弹出、数据展示”。这些效果在UE中实现，而数据展示（如Echarts图表）则在前端更新。因此，当用户在UE场景中点击某个楼层时，UE会通过数据通道发送该楼层的标识到Web前端，前端根据这个标识去请求该楼层的详细数据（或者直接发送数据）并更新图表。总结：在UE4数字孪生场景中，Echarts图表、WebUI与JS和UE的交互主要通过云渲染SDK（如LarkXR）提供的数据通道实现双向通信。具体步骤包括嵌入云渲染的UE应用、建立数据通道、在Web端和UE端分别编写消息处理逻辑，以实现用户操作的传递和数据的实时更新。注意：如果用户没有使用云渲染，而是本地部署的UE应用，那么可以使用UE自带的像素流送技术（Pixel Streaming）以及其提供的WebRTC数据通道，原理类似。因此，我们给出以下回答： </think> 在UE4数字孪生场景中实现Echarts图表、WebUI与JavaScript（JS）和UE的交互，主要涉及以下技术方法和技术栈： --- ### 一、核心交互框架 1. **WebUI嵌入方案** - **实时云渲染技术**（如引用[2]所述）通过LarkXR等云渲染平台将UE像素流嵌入Web页面，使用WebSDK建立双向通信通道。 ```javascript // Web端初始化云渲染 const player = new LarkXR.Player({ container: document.getElementById('ue-container'), channelId: 'digtal-twin' }); player.connect(); ``` - **双向数据流**：Web操作实时反馈到UE场景，UE状态变化同步至WebUI。 2. **Echarts与UE数据同步** - **数据通道插件**（引用[2]）通过WebSDK的数据通道传递JSON格式数据： ```javascript // Web端发送数据到UE player.sendData(JSON.stringify({ type: "chart_update", data: [22, 18, 33] })); // UE端接收并解析数据（通过蓝图/C++） ``` - **数据源联动** - 传感器数据 → 数据库（MySQL） → Web后端API → Echarts - UE场景事件（如点击设备） → 触发Web端图表更新（引用[3]） --- ### 二、关键实现步骤 1. **UE端配置** - **数据接发模块** - 使用`WebSocket`或`HTTP Server`插件建立通信端点 - 蓝图解析JSON数据：提取Echarts参数或控制指令 - **事件触发器** ```cpp // C++ 示例：发送楼层点击事件到Web FString JsonPayload = FString::Printf(TEXT("{\"floor\": %d}"), ClickedFloor); WebModule->BroadcastData(JsonPayload); // 通过WebSocket发送 ``` 2. **Web端集成** - **动态图表渲染** ```javascript // Echarts监听UE数据 player.onDataReceived((data) => { const msg = JSON.parse(data); if (msg.type === "floor_click") { myChart.setOption({ series: [{ data: msg.sensorValues }] }); } }); ``` - **UI控制UE场景** ```html  <button onclick="player.sendCommand('camera_move', {x: 120, y: 85})">查看设备A</button> ``` 3. **数据管道架构 ```mermaid graph LR A[传感器/MQTT] --> B[(MySQL)] B --> C{Web后端} C --> D[Echarts图表] C --> E[UE4 Datasmith] D -->|JS事件| F[UE场景响应] E -->|楼层点击事件| D ``` --- ### 三、典型应用场景（引用[1][3]） 1. **设备监控看板** - Echarts展示实时温度/压力曲线 → 点击图表高亮UE中对应设备 2. **建筑信息管理** - UE中点击楼层 → Web弹出Echarts展示该层能耗数据 3. **生产调度系统** - Web界面调整参数 → 实时驱动UE中的数字孪生生产线模型 --- ### 四、技术栈推荐 | 组件 | 推荐方案 | |---------------|-----------------------------| | **通信协议** | WebSocket、MQTT、REST API | | **UE插件** | VaRest、WebSocket Server | | **前端框架** | Vue/React + Echarts | | **数据通道** | LarkXR WebSDK（引用[2]） | | **数据库** | MySQL + Redis缓存 | > 实践提示：优先使用云渲染SDK的数据通道替代传统HTTP轮询，降低延迟至毫秒级[^2]。对于复杂交互，可将UE事件映射为Web端Redux/Vuex的Action实现状态同步。