跳到主要内容

空间旋转(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 对象没有额外属性。