首页 >>  正文

shift+del

来源：baiyundou.net   日期：2024-08-02

有没有可能可以基于 WebXR 复刻苹果 visionOS 的交互设计呢？这篇文章里，作者尝试“复刻”visionOS中的虚拟键盘设计，不妨来看一下。

这是《LetsHackVision Pro》系列的第一篇，本系列将会基于 WebXR 复刻苹果 visionOS 的交互设计。你可以在（最好是支持手势识别的 VR ）浏览器中访问 https://lets.hackvision.pro/keyboard 体验。

一、visionOS 虚拟键盘

visionOS 虚拟键盘设计有以下几个特点：

  • 可以通过手势直接输入（Direct Touch）；
  • 当手指悬在按键上方时，将呈现点亮效果（Hover Effect），以提示用户；
  • 虽然理论上拥有无限空间，但 visionOS 虚拟键盘仍然采用和 iOS/iPadOS 一致的布局，以保持产间的体验一致性。

visionOS Keyboard

Hover Effect

二、WebXR Device API

Immersive Web Developer Home

WebXR 基于 WebGL 的 3D 图形渲染能力，借助 XR 设备接口（Device API）可访问与虚拟现实（VR）和增强现实（AR）设备相关的输入（如头部位置、控制器位置等），实现通过 Web 技术开发 XR 应用。

THREE.js是一个著名的 WebGL 3D 图形库，它提供了一个高级抽象来通过 WebGL 在浏览器中实现3D图形和动画。lets.hackvision.pro将采用基于 THREE.js 封装的 A-Frame 框架，它的声明式语法设计、实体组件系统（Entity Component System，ECS）和 Apple 的 SwiftUI、RealityKit 非常类似。

WebXR Frameworks

三、WebXR 开发环境

WebXR 的开发环境只需要 Chrome 浏览器和由 Meta 开发的一款插件：Immersive Web Emulator，用来模拟 XR 设备和控制器，不仅可以模拟控制器的位置，还可以实现手势模拟、按键模拟等。基本上你可以在没有任何 XR 设备的情况下，仅用 Chrome 浏览器完成大部分开发。

Immersive Web Emulator

1. 键盘布局

按照 visionOS 的键盘布局，保留 26 个字母 + 空格键 + Shift + Del，这里最难的其实是模拟 visionOS 真实的毛玻璃效果，仅通过普通材质的色彩+透明度，基本很难达到仿真的效果，但这里重点在于交互的实现，以后肯定会有更多模拟 visionOS UI 的 3D 素材出现。

v0

v1

2. Direct Touch

根据 WebXR Hand Input 定义的手部特征点追踪，可以获得每一帧食指指尖（index-finger-tip）的空间坐标，计算其与目标物体（按键）的距离，当距离小于一定阈值，判定为接触并触发pressed事件。

Hand Joints

为按键添加触控响应效果：

3. Hover Effect

悬停点亮效果也可以通过计算食指指尖☝️和按键指尖的距离来估计，但这个距离如果太小无法起到提示用户的效果，如果太大又容易受到旁边按键的干扰。我们在这里利用raycaster的属性，重新定义射线的范围和指向，其中方向以上图的【8、9】两个点确定，范围设定在 10cm（far: 0.1）。

与射线交汇的对象（按键）通过监听raycaster-intersected事件来改变自身材质颜色并播放键盘声效，以实现 Hover Effect。

Finger Raycaster

4. 输入与编辑功能

最后根据各按键绑定的触发事件，在预览窗口中实时呈现输入字母、大小写切换等功能：

Keyboard Input

四、在 VR 设备中访问

在支持手势追踪的 VR 设备浏览器中（需要在浏览器中打开#webxr-hands实验特性），访问 https://lets.hackvision.pro/keyboard

本文由 @V2XR 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

","gnid":"9c7e2cf7456734a00","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01ce63b2b5e71abb1f.jpg","width":"900"},{"desc":"","height":"338","s_url":"https://p0.ssl.img.360kuai.com/t0197812e2abeb285bb_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0197812e2abeb285bb.gif","width":"600"},{"desc":"","height":"450","s_url":"https://p0.ssl.img.360kuai.com/t0179ad7484998291ae_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0179ad7484998291ae.gif","width":"600"},{"desc":"","height":"402","title":"","url":"https://p0.ssl.img.360kuai.com/t012965cd11f9190126.jpg","width":"1080"},{"desc":"","height":"607","s_url":"https://p0.ssl.img.360kuai.com/t01c88c0e88c735a5f6_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t01c88c0e88c735a5f6.gif","width":"1079"},{"desc":"","height":"729","title":"","url":"https://p0.ssl.img.360kuai.com/t01f745363d2d3d2c3f.jpg","width":"1080"},{"desc":"","height":"693","title":"","url":"https://p0.ssl.img.360kuai.com/t0181b6e0db28cdcd0b.jpg","width":"1080"},{"desc":"","height":"1415","title":"","url":"https://p0.ssl.img.360kuai.com/t01ee4ba7ab20712eca.jpg","width":"1080"},{"desc":"","height":"640","s_url":"https://p0.ssl.img.360kuai.com/t0162c47dbe8626d4dd_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0162c47dbe8626d4dd.gif","width":"640"},{"desc":"","height":"632","title":"","url":"https://p0.ssl.img.360kuai.com/t0142c65de6e13082c1.jpg","width":"1080"},{"desc":"","height":"450","s_url":"https://p0.ssl.img.360kuai.com/t018f4b354b457a29e1_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t018f4b354b457a29e1.gif","width":"800"},{"desc":"","height":"728","s_url":"https://p0.ssl.img.360kuai.com/t0115c2a120a33ba1c3_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t0115c2a120a33ba1c3.gif","width":"728"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"pika","pub_time":1692946020000,"pure":"","rawurl":"http://zm.news.so.com/de45797210d5e2bd85d164894fb63d37","redirect":0,"rptid":"2e6c79c645be922f","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[{"clk":"kdigital_1:虚拟键盘","k":"虚拟键盘","u":""}],"title":"在浏览器中复刻 visionOS 交互

阙查怨3495ps中alt+shift+del 这组快捷键是什么意思?还有shift+ctrl+alt+e与ctrl+alt+e有什么区别? -
彭友哪14768078277 ______ alt+shift+del 填充该图层可见区域为前景色 shift+ctrl+alt+e盖印所有可见图层 把所有可见图层另外合成一个单一图层 ctrl+alt+e向下合并 把上层图层的东西合到下层去 上层不变 ctrl+e向下合并 上层消失

阙查怨3495电脑开机显示英文字母shift+ctrl+del啥意思啊 -
彭友哪14768078277 ______ 这是三个按键英文,分别是键盘最下方最左侧向上第二排第一键,和最左侧最下方第一键,还有数字键盘的最右侧下方第二键,三个键同时按下,在操作系统中叫做复合键,能够起到重启电脑,和打开管理器的作用.

阙查怨3495我用shift+del删了的东西怎么能恢复啊??? -
彭友哪14768078277 ______ 在你进行误删除以后,只要你没有向删除文件的分区写入文件,就还有机会将误删除的文件恢复.不过不敢保证全部恢复.现在恢复数据的软件较多,比如:EasyRecovery Pro、FinalDataEnterprise20等,这里我推荐使用EasyRecovery Pro这款...

阙查怨3495Ctrl+Shift+Del是什么意思
彭友哪14768078277 ______ 如果是进到系统之后它的意思就是打开任务管理器,要是还没有进到系统提示你这个组合键,意思就是重启电脑,也就是说你的系统没有了,要重新安装系统

阙查怨3495为什么我按SHIFT+DEL不能彻底删除?
彭友哪14768078277 ______ 右键点回收站~清空回收站

阙查怨3495开机要按crtl+shift+del什么意思 -
彭友哪14768078277 ______ crtl+shift+del是打开任务管理器,可以解决死机,程序无响应之类的问题~

阙查怨3495shift+del不起作用!
彭友哪14768078277 ______ 首先选定文件 然后按住shift点击一下DEL 然后再按一下回车 完成操作,我的系统正常实现! 如果不行的话试试关闭杀软监控,再试一下,有可能你的操作被HOOK造成的.

阙查怨3495Ctrl+Shift+Del -
彭友哪14768078277 ______ 是热启动的快捷键,以前dos系统时,一按就重启了,win98时,按两次重启.在XP或2000系统中,功能也差不多,不过是弹出任务管理器或一个管理界面.你可以试试,是安全的.

阙查怨3495电脑里通过Shift+Del删除了的文件,还能找回来吗? -
彭友哪14768078277 ______ 可以!用下面两个软件:EasyRecovery(可用行100%)EasyRecovery Pro v6.04 汉化版地址:(里面有汉化补丁)http://www.crsky.com/soft/899.html一款威力非常强大的硬盘...

阙查怨3495我家是手提的但按shift加del不是删除东西而是开启滚动键 -
彭友哪14768078277 ______ 可能是手提电脑的Del键还有其它功能,手提电脑,有个Fn键,是转换按键功能的,但与具体的电脑型号有关.按shift后,用鼠标右键删除,可以产生同样的效果.

（编辑：自媒体）
相关推荐
  • shift加del删除的如何恢复
  • ctrl+home
  • ctrl+alt+delete
  • shift+enter键是什么
  • delete键在键盘的哪里
  • shift+ctrl+v
  • shift+space
  • shift+delete是永久删除吗
  • ctrl alt delete
  • alt+delete永久删除吗
  • ctr+alt+del
  • shift delete误删恢复
  • 怎样撤销按了shift的删除
  • ctrl+del
  • ctrl enter
  • alt+enter
  • delete键在哪
  • 按delete删除怎么恢复
  • shift delete删除怎么恢复
  • space是哪个键盘
  • shift+delete是什么功能
  • 误删恢复shift+del
  • shift delete彻底删除
  • shift+home
  • 不小心按了shift+del
  • shift+delete删除怎么恢复
  • shift+ctrl+delete
  • alt+printscreen
  • shift+各种键的功能
  • shift加del删除的如何恢复
    • 关于我们 | 客户服务 | 服务条款 | 联系我们 | 免责声明 | 网站地图 @ 白云都 2024