空间点击(Spatial Tap)
概述
表示完成了一次对空间目标的单手「选择、激活」动作,无论这种交互是通过间接的「注视 + 捏合」完成,还是通过直接触摸完成。
触发条件
| 目标 | 触发时机 |
|---|---|
| 空间化 2D HTML 元素 | 在自身内容占据的 3D 空间位置被点击后触发。 |
| 3D 容器元素 | 在自身可交互内容占据的 3D 空间位置被点击后触发。 |
心智模型
可以把 Spatial Tap 理解为「3D 空间中的 click 事件」。
事件类型名称
| 阶段 | DOM 事件 |
|---|---|
| 完成点击 | spatialtap |
React 用法
| 阶段 | JSX 属性 |
|---|---|
| 完成点击 | onSpatialTap |
原生 DOM 用法
当前限制
WebSpatial SDK 现阶段不允许在 DOM 元素(包括来自 Ref 的元素)上直接监听空间事件。
事件生命周期
「选择」过程中不触发事件;捏住后立刻放开,会触发 spatialtap。
SpatialTapEvent 事件数据
| 字段 | 单位 | 含义 | 坐标系 |
|---|---|---|---|
offsetX, offsetY, offsetZ | px | 点击位置的 X、Y、Z 坐标。 | 触发事件的空间化 2D HTML 元素(包括 3D 容器元素)对应的本地坐标系,采用左手坐标系,原点位于元素对应 2D 面片的左上角,Y 轴向下,Z 轴朝向用户。 |
clientX, clientY, clientZ | px | 点击位置的 X、Y、Z 坐标。 | 当前空间场景容器对应的全局坐标系,采用左手坐标系,原点位于空间场景背板的左上角,Y 轴向下,Z 轴朝向用户。 |