2024-04-08 NO.5 Quest3 手势追踪进行 UI 交互

文章目录

  • 1 玩家配置
  • 2 物体配置
  • 3 添加视觉效果
  • 4 添加文字
  • 5 其他操作
    • 5.1 双面渲染
    • 5.2 替换图片

​ 在开始操作前,我们导入先前配置好的预制体 MyOVRCameraRig,相关介绍在 《2024-04-03 NO.4 Quest3 手势追踪抓取物体-CSDN博客》 文章中。

1 玩家配置

(1)在 Project 窗口下找到 HandPokeInteractor 预制体,将其拖拽为 HandInteractorsLeft 的子物体。对 HandInteractorsRight 进行同样的操作。

image-20240408102705642

(2)分别展开 HandInteractorsLeft 和 HandInteractorsRight 下 HandPokeInteractor 的子物体,将 Visuals 下的两个子物体激活,并关联对应的引用。

  1. HandPokeLimiter
    • Synthetic Hand <-- OVRLeftHandSynthetic。
  2. HandPokeOvershootGlow
    • Hand Visual <-- OVRLeftHandSynthetic > OVRLeftHandVisual。
    • Hand Renderer <-- OVRLeftHandSynthetic > OVRLeftHandVisual > OculusHand_L > l_handMeshNode。
    • Material Editor <-- OVRLeftHandSynthetic > OVRLeftHandVisual > OculusHand_L > l_handMeshNode。

​ 注意右手也是同样的操作,但关联的是 Right 对应的物体。

image-20240408102926707 image-20240408103201528

(3)最后,将 HandPokeInteractor 关联到 Interactors 列表下。

image-20240408151715447

2 物体配置

​ 在 Project 窗口下找到官方提供的 UI 按钮,即 HoverButtons 预制体,将其拖拽入场景。此时运行程序,可以与按钮进行交互。接下来我们模仿该预制体,创建自己的按钮。

(1)依次创建如下物体,层级表示了对应的父子关系。

  • Button(空物体)
    • Model(空物体)
      • Surface(空物体):按钮能按到最下方的底部平面。
    • Visuals(空物体)
      • ButtonVisuals(空物体)
        • ButtonPanel(3D Quad 物体):按钮所在平面。
image-20240408104122742

​ 官方给的预制体中,ButtonVisuals 下还有一个 ButtonPanelBack 物体,该物体负责渲染按钮底部的平面(按钮下方具有浅黑色阴影),这里就不添加该物体了。

(2)为如下物体依次添加对应的脚本。

  • Button:“Poke Interactable”。
    • Model
      • Surface:“Plane Surface”、“Clipped Plane Surface”、“Bounds Clipper”。
    • Visuals
      • ButtonVisuals:“Poke Interactable Visual”。
        • ButtonPanel:将其碰撞体移除。

(3)关联对应引用。

  1. ButtonVisuals
    • Poke Interactable <-- Button。
    • Button Base Transform <-- Surface。
image-20240408105239680
  1. 选中 Surface,可以看到场景上有白色线框的立方体,更改 Surface 的 Z 轴缩放为 0.001 以将其压为平面。
image-20240408105454261
  • Surface
    • Plane Surface <-- “Plane Surface” 脚本。
    • Clippers <-- “Bounds Clipper” 脚本。
image-20240408105625503

​ 最后,更改 Button 的 3 轴缩放大小为 0.1,缩小按钮。并将 ButtonVisuals 向前移出一小段距离,以达到按钮可以被推动的效果。

image-20240408110135750
  1. Button
    • Surface Patch <-- Surface。
image-20240408110328036

​ 此时运行程序,即可用手指推动按钮,且按到底部后不会穿模。需要注意的是,Poke Interaction 限定了只能用食指与按钮交互。

3 添加视觉效果

​ 首先复制一份上述完成好的按钮。

(1)为 ButtonPanel 依次添加以下脚本。

  1. “Interactable Color Visual”。
  2. “Material Property Block Editor”
  3. “Rounded Box Properties”。

(2)为 “Interactable Color Visual” 关联引用。

  • Interactable View <-- Button (1)
  • Editor <-- “Material Property Block Editor” 脚本。
image-20240408111521941

(3)更改 ButtonPanel 上 Mesh Renderer 的材质为 RoundedBoxUnit。这里需要将 Project 窗口下的材质球进行手动拖拽。

image-20240408112208190

(4)修改 “Rounded Box Properties” 脚本的参数,按钮的边缘会发生变化。为了实现官方按钮的效果,我们将官方按钮上的参数进行复制。

​ 注意:Width 和 Height 参数会自动同步更改当前物体的缩放大小。

image-20240408112431523

​ 然后粘贴到我们的按钮上。

image-20240408112516826

​ 完成后,重新将 “Material Property Block Editor” 脚本拖入到 Editor 引用上,即可刷新按钮界面,完成一样的效果。

image-20240408112656991

​ 最后,赋值官方按钮中 “Interactable Color Visual” 脚本上的颜色,即可完成复现。注意,复制完成后确保 Interactable View 和 Editor 引用不变。

4 添加文字

(1)为 ButtonVisuals 添加子物体 Text MeshPro。

image-20240408113600415

(2)修改其字体大小为 4,更改文字内容,并调整对齐方式。

image-20240408113909967

5 其他操作

5.1 双面渲染

​ 使用 Quad 充当按钮模型会只渲染正面,从背面看时会消失。

​ 此时使用 Cube 替换 Quad 即可,将 Cube 的 Z 轴缩放设置为 0.001,即可充当一个平面。

image-20240408114405873 image-20240408114513065

5.2 替换图片

​ 如果想要为按钮定制 UI 图片,可将 ButtonPanel 上的 Mesh Renderer 和 Mesh Filter 组件删除,更换为 Sprite Renderer 组件,并关联需要的图片即可。注意,图片需要更换为 Sprite 类型,且不要挂载以下脚本。

  1. “Interactable Color Visual”。
  2. “Material Property Block Editor”
  3. “Rounded Box Properties”。
image-20240408122158436

​ 调整大小时,可更改父物体 ButtonVisuals 的缩放大小。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/527463.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java-接口-定义接口Filter及其实现类WordFilter

所谓&#xff1a;“纸上得来终觉浅&#xff0c;绝知此事要躬行。” 关于接口的知识&#xff0c;可以几分钟过一遍&#xff1a;Java-接口—知识&#xff08;基础&#xff09;-CSDN博客 现在就是练习time&#xff0c;先来看题&#xff1a; 定义一个接口 Filter&#xff0c;表示…

探索算力(云计算、人工智能、边缘计算等):数字时代的引擎

引言 在数字时代&#xff0c;算力是一种至关重要的资源&#xff0c;它是推动科技创新、驱动经济发展的关键引擎之一。简而言之&#xff0c;算力即计算能力&#xff0c;是计算机系统在单位时间内完成的计算任务数量或计算复杂度的度量。随着科技的不断发展和应用范围的不断扩大…

Java基础笔记(一)

一、面向对象高级基础 1.Java的动态绑定机制 public class DynamicBinding {public static void main(String[] args) {//a 的编译类型 A, 运行类型 BA a new B();//向上转型System.out.println(a.sum());//40 子类sum()注释后-> 30System.out.println(a.sum1());//30 子类…

鸿蒙实战开发-相机和媒体库、如何在eTS中调用相机拍照和录像

介绍 此Demo展示如何在eTS中调用相机拍照和录像&#xff0c;以及使用媒体库接口将图片和视频保存的操作。实现效果如下&#xff1a; 效果预览 使用说明 1.启动应用&#xff0c;在权限弹窗中授权后返回应用&#xff0c;进入相机界面。 2.相机界面默认是拍照模式&#xff0c;…

微软edge浏览器上网、下载速度慢,如何解决??

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

win10如何关闭键盘灯,win10系统键盘灯怎么关闭

操作电脑的时候&#xff0c;相信大家都离不开鼠标和键盘吧&#xff0c;为了提升体验感&#xff0c;很多用户喜欢使用一些带灯光的键盘&#xff0c;有些还有好几种颜色&#xff0c;甚至还有动态的。像这种带灯光的键盘&#xff0c;在打游戏时能够把氛围感拉满。不过有用户表示&a…

echarts折线图自定义打点标记小工具

由于没研究明白echarts怎么用label和lableLine实现自定义打点标记&#xff0c;索性用markPoint把长方形压扁成线模拟了一番自定义打点标记&#xff0c;记录下来备用。&#xff08;markLine同理也能实现&#xff09; 实现代码如下&#xff1a; <!DOCTYPE html> <html…

自然语言处理-词向量模型-Word2Vec

目录 一、前言 二、词向量 三、词向量的实际意义 四、模型的整体框架 五、构建输入数据 六、不同模型的对比 七、负采样方案 八、总结 一、前言 计算机只认识数值数字&#xff0c;那么怎么认识自然语言呢&#xff1f;&#xff1f;&#xff1f;答案就是将自然语言转换转…

SpringCloud Alibaba @SentinelResource 注解

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第十五篇&#xff0c;即介绍 SpringCloud Alibaba 的 SentinelResource 注解。 二、简介 这个注解用于标…

Rust那些事之Borrow VS AsRef​

最近看到两个trait长得挺像&#xff0c;带着疑惑前来学习一下。 Borrow VS AsRef Borrow与AsRef是Rust中非常相似的两个trait&#xff0c;分别是&#xff1a; pub trait Borrow<Borrowed: ?Sized> {fn borrow(&self) -> &Borrowed; }pub trait AsRef<T: ?…

threejs 组-层级模型 | 本地坐标和世界坐标 | 局部坐标系和世界坐标系 | 本地矩阵.materix和世界矩阵.matrixWorld

文章目录 组- THREE.Group递归遍历模型树结构object3D.traverse()object3D.add (object.Object3D..) 添加对象 和 object3D.remove(object.Object3D..) 移除对象 局部坐标系和世界坐标系辅助坐标器 AxesHelper 本地坐标和世界坐标 - 基于世界坐标系的位置本地坐标与世界坐标的理…

常用的深度学习自动标注软件

0. 简介 自动标注软件是一个非常节省人力资源的操作&#xff0c;而随着深度学习的发展&#xff0c;这些自动化标定软件也越来越多。本文章将会着重介绍其中比较经典的自动标注软件 1. AutoLabelImg AutoLabelImg 除了labelimg的初始功能外&#xff0c;额外包含十多种辅助标注…

机器人码垛机:科技创新推动物流行业飞跃发展

在数字化、智能化浪潮的推动下&#xff0c;机器人技术已成为推动各行各业转型升级的重要力量。特别是在物流行业&#xff0c;机器人码垛机的应用正逐渐普及&#xff0c;以其高效、精准、节省人力的特点&#xff0c;助力物流行业实现跨越式发展。星派将介绍机器人码垛机如何助力…

nacos分布式程序开发实例

1.通过windows docker desktop 完成 nacos 的安装/启动/配置 &#xff08;1&#xff09;先安装docker desktop docker-toolbox-windows-docker-for-windows-stable安装包下载_开源镜像站-阿里云 &#xff08;2&#xff09;配置docker 国内镜像源 Docker 镜像加速 | 菜鸟教程…

C++ list链表模拟实现

目录 前言&#xff1a; 模拟实现&#xff1a; 迭代器的实现&#xff1a; list类功能函数实现&#xff1a; 初始化成空函数&#xff08;empty_init&#xff09;&#xff1a; 构造函数&#xff1a; 拷贝构造函数&#xff1a; 尾插&#xff08;push_back&#xff09;: 插入…

【触想智能】工业一体机和普通电脑的区别是什么?

工业一体机和普通电脑的区别是什么&#xff0c;工业一体机可以当普通电脑一样使用吗? 要想了解工业一体机和普通电脑的区别是什么?我们首先来看看工业一体机是什么&#xff0c;它跟普通电脑有哪些相似的地方?下面小编就为大家来详细介绍一下。 在工作原理上&#xff0c;工业…

GFS分布式 文件系统

一、GFS的概念 文件存储分为nfs、lvm、raid 对象存储分为GFS、CEPH、fastDFS&#xff08;分布式文件存储&#xff09;NAS OSS S3 switch OSS 属于阿里云 通过URL 链接 S3属于亚马逊通过URL链接 1.1 GFS简介 开源的分布式文件系统&#xff0c;由存储服务器、客户端…

Pillow教程11:九宫格切图的实现方法(安排!!!)

---------------Pillow教程集合--------------- Python项目18&#xff1a;使用Pillow模块&#xff0c;随机生成4位数的图片验证码 Python教程93&#xff1a;初识Pillow模块&#xff08;创建Image对象查看属性图片的保存与缩放&#xff09; Pillow教程02&#xff1a;图片的裁…

xv6源码分析 003

xv6源码分析 003 在开始今晚的内容之前我先纠正以下昨天的一个错误 struct cmd {int type; };代表的是在sh.c开头就定义的宏常量&#xff0c;系统调用号是通过汇编代码来传入的。修改之后的内容如下&#xff1a; 好啦&#xff0c;我们继续昨晚的内容吧。 在sh.c 的 main函数中…

大屏可视化展示平台解决方案(word原件获取)

1.系统概述 1.1.需求分析 1.2.重难点分析 1.3.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 2.3.接口及要求 3.系统功能设计 3.1.功能清单列表 3.2.数据源管理 3.3.数据集管理 3.4.视图管理 3.5.仪表盘管理 3.6.移动端设计 3.1.系统权限设计 3.2.数据查询过程设…