首页 > 其他分享 >UE 实现鼠标点选模型

UE 实现鼠标点选模型

时间:2022-08-29 16:02:10浏览次数:81  
标签:点选 鼠标 Pawn 蓝图 获取 点击 UE 节点

楔子

在孪生的场景中,点击三维对象是常用的操作。比如点击模型显示相关属性和图片,点击摄像头模型播放视频,点击楼宇展开楼层等等。

因此点选模型是属于数字孪生最必要的基础能力。

准备知识

UE蓝图介绍

本文会涉及到一些蓝图的知识,如果你对蓝图不了解,需要先了解下UE的蓝图知识。蓝图 是虚幻引擎4的可视化脚本方法。也就是说,通常要通过编写脚本来完成的任务,现在可以通过一个由节点和连接组成的图形来创建,而不必输出任何实际的代码。

蓝图相关的基础知识,可以参考官方文档。
https://docs.unrealengine.com/4.27/zh-CN/ProgrammingAndScripting/Blueprints/
https://docs.unrealengine.com/4.27/zh-CN/Resources/Showcases/BlueprintExamples/
后续也会写相关的文章介绍蓝图知识。

数学理论

UE鼠标点选模型的技术理论是大致这样的:

  1. 获取鼠标点击的位置和方向(涉及到鼠标位置转换到三维空间坐标,可以设置内置方法获取)
  2. 通过位置和方向发射一条射线。
  3. 判断射线和那些对象进行相交(可以使用内置的方法获取),取最近相交的模型,就是鼠标点击获取的三维对象。

如果熟悉threejs,就知道这有点类似Threejs的raycaster。

重载Pawn

我们的蓝图在一个重载的Pawn类里面实现,Pawn 是可那些由玩家或 AI 控制的所有 Actor 的基类。Pawn 是玩家或 AI 实体在游戏场景中的具化体现。这说明, Pawn 不仅决定了玩家或 AI 实体的外观效果,还决定了它们如何与场景进行碰撞以及其他物理交互。某些游戏可能在游戏中没有可见的玩家模型或替身(Avatar),因此这点在某些情况下可能会令人困惑。不过,无论如何,Pawn 仍代表着玩家或实体在游戏中的物理方位、旋转角度等。Character 是一种特殊的、可以行走的 Pawn。

有关Pawn的更多知识,Pawn

再内容浏览器里面右键,新建蓝图->蓝图类:
image.png

选择Pawn:

image.png

然后在浏览器里面输入命名:

image.png

双击新建的蓝图类,进入蓝图编辑页面。

image.png

有关蓝图的基本操作,比如添加节点,移动节点,连线等此处不详细介绍。

监听鼠标

在蓝图中监听鼠标事件(本文是右键)如下:

image.png

Pressed 表示按下,Released表示松开。

获取鼠标位置和方向

获取鼠标位置的蓝图节点“将鼠标位置转换为场景空间”

image.png

其中的目标是玩家控制器,通过下面的节点获取玩家控制器:

image.png

构造射线

节点“将鼠标位置转换为场景空间” 可以获取鼠标所在的世界坐标和向前的方向,分别设定为:origin和direction。 其中origin未射线的原点,通过向量计算,可以获取射线的终点end:

end = origin + directon * length

其中length为常量,我们可以指定,因此计算end的蓝图如下:

image.png

其中涉及到一个常量乘以向量的蓝图节点,和两个向量相加的节点。 首先world direction 乘以一个常量10000,计算的结果在和world location想加,就可以得到终点。

起点和终点会最终作为下一步计算输入值。

通过射线获取检测结果

通过射线获取点击结果的节点是“由通道检测线条”

image.png

其中:

  • start 表示射线起始点
  • end表示射线重点
  • Out Hit 表示检测到的对象
  • Return Value 是一个bool,true表示有对象命中,false表示没有对象命中。

中断命中结果

所谓中断命中结果的意思 可以理解把命中的包装结果进行分项拆分。
首先通过检测的结果return value 判断,命中则中断命中结果,条件判断通过分支节点来进行:

image.png

  • Condition 表示输入的条件,
  • True表示条件为真的时候的执行
  • False表示条件为否的时候的执行

本实例中,条件为真的时候,执行中断结果:

image.png

获取结果信息

上面命中结果中:

  • Hit Actor表示被击中的actor
  • Hit Component 被击中的actor中的component,如果有子组件mesh可以被射线检测到的话

获取到相关的信息后就可以执行相关操作,此处打印出相关的信息如下:

image.png

显示鼠标光标

默认运行程序后, 鼠标的光标是不显示的,为了能够看清点击点,需要显示鼠标光标,比如按下tap键显示光标,如下:

image.png

设置Pawn

重写了Pawn类之后,在程序的设置中,需要把模型的Pawn改成我们重写的Pawn类,才能生效,如下图所示:

image.png

结语

本文说明了通过射线的方法检测鼠标点击模型的功能。 最终的效果如下图所示:

image.png

点击的时候,打印对应component的名称。

如果你有好的经验,也欢迎和我交流。关注公号“ITMan彪叔” 可以添加作者微信进行交流,及时收到更多有价值的文章。

标签:点选,鼠标,Pawn,蓝图,获取,点击,UE,节点
From: https://www.cnblogs.com/flyfox1982/p/16636217.html

相关文章

  • vue报错Error in render: “TypeError: Cannot read property ‘length‘ of undefine
    最近弄安卓开发,uniapp,开发,微信小程序无任何报错,但安卓端,报错,而且,一个错误会再报很多不相干的错误;并不会显示代码具体报错的行数。排查费劲!!![Vuewarn]:Errorinrender:......
  • Vue引入CSS样式的方法
    Vue引入CSS样式的方法https://blog.csdn.net/pick_ears/article/details/122214627......
  • 使用 vue 开发 APICloud 应用的教程
    文档目录一、APICloud创建程序1、APICloud后台创建应用2、APICloud拉取代码,APICloud开发工具地址APICloud开发工具PC端,先下载APICloud开发工具,打开开发工具......
  • 解决vue3+ts require报错
      自己安装命令安装之后,在ts.config.json里面配置之后(最后一行){"compilerOptions":{"target":"es5","module":"esnext","strict":true,"......
  • vue+elementUI+sortablejs --- el-table列表拖拽
    前言:最近很多需求都与拖拽有关,一般拖拽用的都是 vuedraggable 但是要是在el-table列表里面拖拽当用vuedraggable去包裹table列表包外层只能拖动整个列表包里面数......
  • vue大文件分片上传插件
    ​文件夹数据库处理逻辑 public class DbFolder{    JSONObjectroot;       public DbFolder()    {        this.root= new J......
  • vue项目mixin.js的使用及注意详解
     简单的介绍下mixin(混入):官方介绍:混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有......
  • Jquery事件的使用与介绍。
    jQuery是为响应HTML页面中的事件而定制的。1.什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。实例:在元......
  • 057_末晨曦Vue技术_处理边界情况之强制更新和创建低开销的静态组件
    强制更新和创建低开销的静态组件点击打开视频讲解更加详细强制更新如果你发现你自己需要在Vue中做一次强制更新,99.9%的情况,是你在某个地方做错了事。你可能还没有留......
  • echarts-散点图-vue3-内阴影
      以上为效果图但是有一个问题是,一开始需要定义位置和颜色数组,当数据量过多的时候会重叠而且要提前声明很多数据后面我决定用关系图来做了,先放上散点图代码供参考f......