当前位置: 首页 > news >正文

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 的缩放大小。

相关文章:

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

文章目录 1 玩家配置2 物体配置3 添加视觉效果4 添加文字5 其他操作5.1 双面渲染5.2 替换图片 ​ 在开始操作前&#xff0c;我们导入先前配置好的预制体 MyOVRCameraRig&#xff0c;相关介绍在 《2024-04-03 NO.4 Quest3 手势追踪抓取物体-CSDN博客》 文章中。 1 玩家配置 &a…...

PaddleDetection 项目使用说明

PaddleDetection 项目使用说明 PaddleDetection 项目使用说明数据集处理相关模块环境搭建 PaddleDetection 项目使用说明 https://github.com/PaddlePaddle/PaddleDetection/blob/release/2.7/configs/ppyoloe/README_cn.md 自己项目&#xff1a; https://download.csdn.net/d…...

leetcode解题思路分析(一百五十五)1352 - 1358 题

最后 K 个数的乘积 请你实现一个「数字乘积类」ProductOfNumbers&#xff0c;要求支持下述两种方法&#xff1a; add(int num) 将数字 num 添加到当前数字列表的最后面。 getProduct(int k) 返回当前数字列表中&#xff0c;最后 k 个数字的乘积。 你可以假设当前列表中始终 至少…...

如何将普通maven项目转为maven-web项目

文件-项目结构&#xff08;File-->Project Structure &#xff09; 模块-->learn&#xff08;moudle-->learn&#xff09; 选中需要添加web的moudle&#xff0c;点击加号&#xff0c;我得是learn&#xff0c;单击选中后进行下如图操作&#xff1a; 编辑路径 结果如下…...

LeetCode 226. 翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,1] 示例…...

【ArcGIS Pro二次开发】(85):Aspose.Cells中的Excel操作

Aspose.Cells是一款功能强大的Excel文档处理和转换控件&#xff0c;开发人员和客户电脑无需安装Microsoft Excel也能在应用程序中实现类似Excel的强大数据管理功能。 1、获取工作薄Workbook string excelFile "C:\Users\Administrator\Desktop\FE.xlsx"; Workbook …...

基于java+springboot+vue实现的兴顺物流管理系统(文末源码+Lw)23-287

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;货运信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广…...

pytorch view、expand、transpose、permute、reshape、repeat、repeat_interleave

非contiguous操作 There are a few operations on Tensors in PyTorch that do not change the contents of a tensor, but change the way the data is organized. These operations include: narrow(), view(), expand() and transpose() permute() This is where the con…...

uni-app实现下拉刷新

业务逻辑如下&#xff1a; 1.在滚动容器中加入refresher-enabled属性&#xff0c;表示为开启下拉刷新 2.监听事件&#xff0c;添加refresherrefresh事件 3.在事件监听函数中加载数据 4.关闭动画&#xff0c;添加refresher-triggered属性&#xff0c;在数据请求前开启刷新动画…...

vue ts 应用梳理

文章目录 前言一、页面传值1.1 [props](https://cn.vuejs.org/guide/components/props.html)1.2 [emit](https://cn.vuejs.org/guide/components/events.html)1.3 [store](https://pinia.vuejs.org/zh/getting-started.html) 二、实时计算2.1 [watch](https://cn.vuejs.org/gui…...

CUDA12.4文档-全文翻译

本博客参考官方文档进行介绍,全网仅此一家进行中文翻译,走过路过不要错过。 官方网址:https://docs.nvidia.com/cuda/cuda-c-programming-guide/ 本文档分成多个博客进行介绍,在本人专栏中含有所有内容: https://blog.csdn.net/qq_33345365/category_12610860.html CU…...

【C 数据结构】循环链表

文章目录 【 1. 基本原理 】【 2. 循环链表的创建 】2.1 循环链表结点设计2.2 循环单链表初始化 【 3. 循环链表的 插入 】【 4. 循环单链表的 删除操作 】【 5. 循环单链表的遍历 】【 6. 实例 - 循环链表的 增删查改 】【 7. 双向循环链表 】 【 1. 基本原理 】 对于单链表以…...

Python列表

使用场景&#xff1a;列表是用来存储多组数据的 列表是可变类型 列表支持切片 1.基本规则 1.列表使用[]来表示 2.初始化列表&#xff1a;list [] 3.列表可以一次性存储多个数据&#xff1a;[数据1&#xff0c;数据2&#xff0c;数据3&#xff0c;…] 4.列表中的每一项&#…...

谈谈系列之金融直播展业畅想

近些年直播异常火热&#xff0c;对于各大中小型基金证券公司&#xff0c;也纷纷引入直播作为新型展业渠道。在这其中有一部分直接采用第三方云平台&#xff0c;也有少部分选择自建直播平台。当然自建直播平台也不是纯自研&#xff0c;大抵都是外购第三方厂商整体解决方案&#…...

【C 数据结构】双向链表

文章目录 【 1. 基本原理 】【 2. 双向链表的 创建 】实例 - 输出双向链表 【 3. 双向链表 添加节点 】【 4. 双向链表 删除节点 】【 5. 双向链表查找节点 】【 7. 双向链表更改节点 】【 8. 实例 - 双向链表的 增删查改 】 【 1. 基本原理 】 表中各节点中都只包含一个指针&…...

Leetcode刷题之消失的数字(C语言版)

Leetcode刷题之消失的数字&#xff08;C语言版&#xff09; 一、题目描述二、题目解析 一、题目描述 数组nums包含从0到n的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗&#xff1f; 注意&#xff1a;本题相对书上原题稍作…...

LeetCode654:最大二叉树

题目描述 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。 递归地在最大值 左边 的 子数组前缀上 构建左子树。 递归地在最大值 右边 的 子数组后缀上 构建右子树。 返回 nums 构建的 …...

AI禁区徘徊监测识别摄像机

AI禁区徘徊监测识别摄像机是一种基于人工智能技术的智能监控设备&#xff0c;用于监测禁止进入或逗留的区域。这种摄像机通过高清摄像头实时捕捉场景图像&#xff0c;利用AI算法对人员徘徊行为进行识别和监测&#xff0c;有助于提高安全防范水平&#xff0c;减少潜在的安全风险…...

【学习】什么是信创适配性测试?信创适配性测试的重要性有哪些?

随着信息技术的快速发展和广泛应用&#xff0c;信息技术应用创新&#xff08;信创&#xff09;已成为推动我国产业升级和经济发展的重要力量。在信创领域&#xff0c;适配性测试至关重要&#xff0c;它不仅关系到信创产品的质量和性能&#xff0c;还直接影响到用户的使用体验和…...

linux 配置服务开机启动

一、Centos 中配置进程开启启动 1、使用 systemd 服务&#xff1a; &#xff08;1&#xff09;创建一个名为 myapp.service 的服务文件&#xff1a; [Unit] DescriptionMyApp #描述 After #描述服务类别 [Service] Typefork…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...