有沒有可能可以基于 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