3D × 真实可点 UI

回声 Echo One
智能音箱

屏幕上那张播放器卡片不是贴图——它是真实 DOM。
每一个按钮、滑杆都真实可点,随 3D 屏幕一起转动。

回声 ECHO ONE实时
晨间电子第 1 首 · 合成旋律
70

拖拽旋转音箱 · 直接点屏幕上的播放器 · 声音由浏览器实时合成

STEP 01

3D 里只画波形

音箱屏幕的 3D 本体只是一块 CanvasTexture 平面,上面画着随音量跳动的荧光波形——它负责"看起来在 3D 里"。

STEP 02

UI 走真 DOM

播放器卡片是货真价实的 HTML 按钮与滑杆。点击、拖动、hover 全是浏览器原生行为,零 hack、处处可点。

STEP 03

每帧投影贴合

每帧把屏幕四个角投影到 2D,解单应性矩阵生成 matrix3d,把 DOM 卡片做透视变换贴合上去——视觉与交互在此合流。