首页 >> 正文

怎么让两个浏览器同时播放

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

有没有可能可以基于 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 素材出现。

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":"cache","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 交互

常琼秆4132读一读,写出相应的整体认读音节?un?ue?ing?in?ie?这些字母怎么写才是整体认读音节哈? -
管黎秒15178258382 ______[答案] zhi、chi、shi、ri、 zi、ci、si、 yi、wu、yu、 ye、yue、yin、yun、yuan、ying

常琼秆4132...为是其智弗若(与)?曰:非然(也).”1.解释括号中的词语2.判断正误(√/*):文中的“弈秋”是一个人名. ＂虽与之俱学,弗若之矣＂中的两个＂之... -
管黎秒15178258382 ______[答案] 1:之,指听弈秋讲课;之,代词,指鸿鹄;与,句末语气词,通欤;也,语气词 2:正确.正确.错误,通国是指全国 3认认真真的听了弈秋所讲的课 4对比 5学习好坏,不是因为智慧的差异,而是学习的态度的认真与否.人是否成功也是如此.

常琼秆41321) Let's play a guessing game .让我们玩猜谜游戏吧.2.Can you guess?你能猜一猜吗?1.以上两个例句中guess与guessing的词性一样吗?能修饰名词的是? -
管黎秒15178258382 ______[答案] guessing 是形容词可以修饰名词(你的句子里就是修饰名词的)(ing结尾的很多都是形容词或者是动名词) guess是动词

常琼秆4132四个房间的钥匙混在一起了,要打开所有房间的门,最多需要试几次?最少需要试几次?请说明原因 -
管黎秒15178258382 ______[答案] 最多九次至少三次最多的情况是你衰到低的时候才可能发生的:打第一房间四把钥匙都试了一遍,第四次才开了门;第二个房间你试了剩下的三把钥匙才开了门;第三个房间你试了剩下的两把才开了门;最后一个房间当然就是...

常琼秆4132粒子加速器如何对粒子进行加速?能不能把粒子加速器的原理形象的给我讲一下?我觉得这有些抽象诶. -
管黎秒15178258382 ______[答案] 把电场类比于引力场,想像你是个电子不停下坠的过程就是的.当然电场方向和带电粒子加速方向可以人为改变使得粒子可以在一个环形轨道内不停被加速(下落)

常琼秆4132一个密码箱有6个数字组成,每个数字都是由0--9这十个数字中的一个,小明的妈妈忘记了最后两个数字,那么她一次就能打开保险箱的概率是多少? -
管黎秒15178258382 ______[答案] 1\10*1\10=1\100 答:概率是1\100(100分之1).

常琼秆4132英语翻译打开还要去点一下播放器,才能播放! -
管黎秒15178258382 ______[答案] once upon a time there was a young girl who felt very different from the others she didn't know that one day she would become someone's special This is the story of the queen,the queen of the night. I always there dance all the night. They just look at me ...

常琼秆4132傲游浏览器中怎样让二个标签同时打开? -
管黎秒15178258382 ______ 窗口,层叠、平铺(水平、垂直)、还原窗口等都可以同时显示几个窗口.

（编辑：自媒体）