有沒(méi)有可能可以基于 WebXR 復(fù)刻蘋(píng)果 visionOS 的交互設(shè)計(jì)呢？這篇文章里，作者嘗試“復(fù)刻”visionOS中的虛擬鍵盤(pán)設(shè)計(jì)，不妨來(lái)看一下。

這是《LetsHackVision Pro》系列的第一篇，本系列將會(huì)基于 WebXR 復(fù)刻蘋(píng)果 visionOS 的交互設(shè)計(jì)。你可以在（最好是支持手勢(shì)識(shí)別的 VR ）瀏覽器中訪問(wèn) https://lets.hackvision.pro/keyboard 體驗(yàn)。

一、visionOS 虛擬鍵盤(pán)

visionOS 虛擬鍵盤(pán)設(shè)計(jì)有以下幾個(gè)特點(diǎn)：

• 可以通過(guò)手勢(shì)直接輸入（Direct Touch）；
• 當(dāng)手指懸在按鍵上方時(shí)，將呈現(xiàn)點(diǎn)亮效果（Hover Effect），以提示用戶(hù)；
• 雖然理論上擁有無(wú)限空間，但 visionOS 虛擬鍵盤(pán)仍然采用和 iOS/iPadOS 一致的布局，以保持產(chǎn)間的體驗(yàn)一致性。

visionOS Keyboard

Hover Effect

二、WebXR Device API

Immersive Web Developer Home

WebXR 基于 WebGL 的 3D 圖形渲染能力，借助 XR 設(shè)備接口（Device API）可訪問(wèn)與虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）設(shè)備相關(guān)的輸入（如頭部位置、控制器位置等），實(shí)現(xiàn)通過(guò) Web 技術(shù)開(kāi)發(fā) XR 應(yīng)用。

THREE.js是一個(gè)著名的 WebGL 3D 圖形庫(kù)，它提供了一個(gè)高級(jí)抽象來(lái)通過(guò) WebGL 在瀏覽器中實(shí)現(xiàn)3D圖形和動(dòng)畫(huà)。lets.hackvision.pro將采用基于 THREE.js 封裝的 A-Frame 框架，它的聲明式語(yǔ)法設(shè)計(jì)、實(shí)體組件系統(tǒng)（Entity Component System，ECS）和 Apple 的 SwiftUI、RealityKit 非常類(lèi)似。

WebXR Frameworks

三、WebXR 開(kāi)發(fā)環(huán)境

WebXR 的開(kāi)發(fā)環(huán)境只需要 Chrome 瀏覽器和由 Meta 開(kāi)發(fā)的一款插件：Immersive Web Emulator，用來(lái)模擬 XR 設(shè)備和控制器，不僅可以模擬控制器的位置，還可以實(shí)現(xiàn)手勢(shì)模擬、按鍵模擬等?；旧夏憧梢栽跊](méi)有任何 XR 設(shè)備的情況下，僅用 Chrome 瀏覽器完成大部分開(kāi)發(fā)。

Immersive Web Emulator

1. 鍵盤(pán)布局

按照 visionOS 的鍵盤(pán)布局，保留 26 個(gè)字母 + 空格鍵 + Shift + Del，這里最難的其實(shí)是模擬 visionOS 真實(shí)的毛玻璃效果，僅通過(guò)普通材質(zhì)的色彩+透明度，基本很難達(dá)到仿真的效果，但這里重點(diǎn)在于交互的實(shí)現(xiàn)，以后肯定會(huì)有更多模擬 visionOS UI 的 3D 素材出現(xiàn)。

v0

v1

2. Direct Touch

根據(jù) WebXR Hand Input 定義的手部特征點(diǎn)追蹤，可以獲得每一幀食指指尖（index-finger-tip）的空間坐標(biāo)，計(jì)算其與目標(biāo)物體（按鍵）的距離，當(dāng)距離小于一定閾值，判定為接觸并觸發(fā)pressed事件。

Hand Joints

為按鍵添加觸控響應(yīng)效果：

3. Hover Effect

懸停點(diǎn)亮效果也可以通過(guò)計(jì)算食指指尖??和按鍵指尖的距離來(lái)估計(jì)，但這個(gè)距離如果太小無(wú)法起到提示用戶(hù)的效果，如果太大又容易受到旁邊按鍵的干擾。我們?cè)谶@里利用raycaster的屬性，重新定義射線的范圍和指向，其中方向以上圖的【8、9】?jī)蓚€(gè)點(diǎn)確定，范圍設(shè)定在 10cm（far: 0.1）。

與射線交匯的對(duì)象（按鍵）通過(guò)監(jiān)聽(tīng)raycaster-intersected事件來(lái)改變自身材質(zhì)顏色并播放鍵盤(pán)聲效，以實(shí)現(xiàn) Hover Effect。

Finger Raycaster

4. 輸入與編輯功能

最后根據(jù)各按鍵綁定的觸發(fā)事件，在預(yù)覽窗口中實(shí)時(shí)呈現(xiàn)輸入字母、大小寫(xiě)切換等功能：

Keyboard Input

四、在 VR 設(shè)備中訪問(wèn)

在支持手勢(shì)追蹤的 VR 設(shè)備瀏覽器中（需要在瀏覽器中打開(kāi)#webxr-hands實(shí)驗(yàn)特性），訪問(wèn) https://lets.hackvision.pro/keyboard