Vue3与UE5的通信：二.webui插件在UE中的使用方法

江城开朗的豌豆
2,276 阅读3分钟

前言

在上一篇文章《Vue3与UE5的通信：一. 下载安装WebUI插件》中，我们详细介绍了如何在UE5项目中安装和配置WebUI插件。本文将继续深入，为大家讲解如何在UE5项目中实际使用这个插件，实现Vue3前端与UE5的双向通信。

如果这些内容对你有帮助，希望你能点个赞、收藏并关注。你的每一个支持，都是激励我继续创作的动力。让我们一起在这个Web与游戏引擎结合的新领域中探索进步！

正文开始

第一步（创建一个UE的空白项目）

image.png 新建一个关卡 image.png

第二步（创建控件蓝图：重点）

image.png

image.png 打开创建的 image.png

第三步（什么是蓝图）

蓝图是虚幻引擎（UE）中的一种可视化脚本编程系统。它允许开发者通过图形界面来创建游戏逻辑，而不需要直接编写C++代码。

蓝图的主要特点

  • 1.可视化编程

    • 使用节点和连线来表示逻辑流程

    • 直观地展示数据流和执行流程

    • 所见即所得的编辑方式

  • 2.实时反馈

    • 无需编译即可测试

    • 可以在游戏运行时修改

    • 快速迭代开发

  • 3.类型安全

    • 引脚颜色区分不同数据类型

    • 自动类型检查

    • 防止错误连接

第四步（打开刚创建的控件蓝图及相关操作）

搜索 webui 插件，将插件拖到下面的目录下，如图所示：

image.png

image.png

image.png 然后将写好的vue3项目的前端页面挂在到UE中：操作如图所示：

image.png

挂载在UE里面的方式有两种：如图（推荐第二种）

方式一:

image.png 方式二: 按图的步骤来

image.png

image.png

image.png

image.png

第五步（将控件蓝图挂在到关卡中）如图:

image.png

image.png 完整图如下：

image.png

第六步（开启web页面穿透及开启鼠标事件）:

上一步写完我们先预览一下页面，可以看到模型转动不了

image.png

接下来实现本章节最后的功能：还是以图为例（我不是很会描述，直接上图：一图解千言）

image.png

image.png

image.png

image.png

最后一步开启网页的穿透（回到用户控件页面，勾选透明穿透）

image.png

好了，这一期的文章就结束了，已经写的非常详细了，希望大家能点赞支持一下

持续更新中

结语

通过以上步骤，您应该能够顺利将你的前端项目显示在页面中了。如果遇到问题，可以查看插件的 GitHub 页面或在社区寻求帮助。也可以加入我自己创建的🐧🐧交流群（906392632），一起交流解决

avatar
文章
阅读
粉丝