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

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

一、visionOS 虛擬鍵盤

visionOS 虛擬鍵盤設(shè)計有以下幾個特點：

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

visionOS Keyboard

Hover Effect

二、WebXR Device API

Immersive Web Developer Home

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

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

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

WebXR Frameworks

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

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

Immersive Web Emulator

1. 鍵盤布局

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

v0

v1

2. Direct Touch

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

Hand Joints

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

3. Hover Effect

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

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

Finger Raycaster

4. 輸入與編輯功能

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

Keyboard Input

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

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