跳到主要内容

空间拖拽（Spatial Drag）

概述​

表示完成了一次对空间目标的单手「选择、激活、持续」动作，无论这种交互是通过间接的「注视 + 捏合」完成，还是通过直接触摸完成。

触发条件​

目标触发时机
空间化 2D HTML 元素在自身内容占据的 3D 空间位置被「捏住不放」后触发这套事件。
3D 容器元素在自身可交互内容占据的 3D 空间位置被「捏住不放」后触发这套事件。

心智模型​

可以在 3D 空间中的任意方向上拖拽，并把目标放到空间中的任意位置。

事件类型名称​

阶段DOM 事件
拖拽开始spatialdragstart
拖拽持续中spatialdrag
拖拽结束spatialdragend

React 用法​

阶段JSX 属性
拖拽开始onSpatialDragStart
拖拽持续中onSpatialDrag
拖拽结束onSpatialDragEnd

原生 DOM 用法​

当前限制

WebSpatial SDK 现阶段不允许在 DOM 元素（包括来自 Ref 的元素）上直接监听空间事件。

事件生命周期​

「选择」过程中不触发事件；捏住不放刚开始会触发 spatialdragstart，激活后保持会持续触发 spatialdrag，松开后触发 spatialdragend。

SpatialDragStartEvent 事件数据​

字段单位含义坐标系
offsetX, offsetY, offsetZpx激活位置的 X、Y、Z 坐标。触发事件的空间化 2D HTML 元素（包括 3D 容器元素）对应的本地坐标系，采用左手坐标系，原点位于元素对应 2D 面片的左上角，Y 轴向下，Z 轴朝向用户。
clientX, clientY, clientZpx激活位置的 X、Y、Z 坐标。当前空间场景容器对应的全局坐标系，采用左手坐标系，原点位于空间场景背板的左上角，Y 轴向下，Z 轴朝向用户。

SpatialDragEvent 事件数据​

字段单位含义
translationX, translationY, translationZpx相对于拖拽起点的偏移量。

SpatialDragEndEvent 事件数据​

没有额外数据

spatialdragend 回调拿到的 SpatialDragEndEvent 对象没有额外属性。