空间旋转(Spatial Rotate)
概述
表示完成了一次对空间目标的双手「选择、激活、持续」动作,并产生旋转效果。无论这种交互是通过间接的「注视 + 捏合」完成,还是通过直接触摸完成。
触发条件
| 目标 | 触发时机 |
|---|---|
| 空间化 2D HTML 元素 | 在自身内容占据的 3D 空间位置被「捏住不放」后触发这套事件。 |
| 3D 容器元素 | 在自身可交互内容占据的 3D 空间位置被「捏住不放」后触发这套事件。 |
心智模型
双手之间的连线(相当于一个真实物体)可以在 3D 空间中做任意角度的旋转。
事件类型名称
| 阶段 | DOM 事件 |
|---|---|
| 旋转持续中 | spatialrotate |
| 旋转结束 | spatialrotateend |
React 用法
| 阶段 | JSX 属性 |
|---|---|
| 旋转持续中 | onSpatialRotate |
| 旋转结束 | onSpatialRotateEnd |
原生 DOM 用法
当前限制
WebSpatial SDK 现阶段不允许在 DOM 元素(包括来自 Ref 的元素)上直接监听空间事件。
事件生命周期
「选择」过程中不触发事件;捏住不放激活后,保持动作会持续触发 spatialrotate,松开后触发 spatialrotateend。
SpatialRotateEvent 事件数据
| 字段 | 取值 | 含义 |
|---|---|---|
quaternion | 四元数。 | 相对于初始状态的旋转量,其中包含旋转轴的信息。 |
SpatialRotateEndEvent 事件数据
没有额外数据
spatialrotateend 回调拿到的 SpatialRotateEndEvent 对象没有额外属性。