跳到主要内容

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