VRTK4⭐四.和 UI 元素交互

文章目录

  • [🟥 安装Tilia Unity.UI](#🟥 安装Tilia Unity.UI)
  • [🟧 配置射线与UI交互器](#🟧 配置射线与UI交互器)
    • [1️⃣ 配置直线射线](#1️⃣ 配置直线射线)
    • [2️⃣ 配置UI交互器](#2️⃣ 配置UI交互器)
  • [🟨 配置UI](#🟨 配置UI)
    • [1️⃣ 更新EventSystem](#1️⃣ 更新EventSystem)
    • [2️⃣ 进行Canvas设置](#2️⃣ 进行Canvas设置)

我们要实现的功能:

右手触摸到圆盘:显示直线射线

右手圆盘键按下:与选中UI交互

🟥 安装Tilia Unity.UI

PackageManager安装git包 : https://github.com/studentutu/Tilia.UnityUI.git

🟧 配置射线与UI交互器

1️⃣ 配置直线射线

如何所示,创建 Indicators.ObjectPointers.Straight ,并完成配置.

2️⃣ 配置UI交互器

1.将 Full_L_Interactions.Interactor Variant 放置在 RightControllerAlias 下,并删减至如下结构.

2.如下图所示,完成 L_R_ UI Pointer on Interactor 的配置

🟨 配置UI

1️⃣ 更新EventSystem

如下图所示,更新 EventSystem

2️⃣ 进行Canvas设置

完成如下步骤:

  • Canvas转换为WorldSpace
  • 添加 VRTK4_UICanvas 组件
  • 设置Canvas的Size

注意:
Canvas的大小决定了该UI的交互范围.只有在范围内的UI才能被交互.

大家还有什么问题,欢迎在下方留言!

如果你有 技术的问题 或 项目开发

都可以加下方联系方式

和我聊一聊你的故事🧡

相关推荐
laowangpython6 天前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
北极星日淘6 天前
前端 i18n 中日双语交互 + 翻译客服接口联动方案|日系海淘平台中文友好化开发实战
前端·交互
风华圆舞6 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
鲲穹AI超级员工6 天前
多款实用配色工具汇总,适配设计、UI 创作等多元场景
ui·色彩设计
UXbot6 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
蓝速科技6 天前
蓝速科技 AI 数字人部署与交互实战指南
人工智能·科技·交互
烂白菜6 天前
智码美形:华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践
ui·华为云·ux
像风一样的男人@6 天前
python --实现代理服务器
git·ui
风华圆舞6 天前
鸿蒙 Flutter 页面怎么感知防窥状态并调整 UI 可见性
flutter·ui·harmonyos
UXbot6 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app