SparkAR Community Scripting Docs
  • Spark AR Scripting Reference
  • Audio Analyzer / Energy Meter
  • Asynchronous API Changes (v85+)
  • Custom Instructions
  • AnimationModule
    • ValueDriver
    • TimeDriver
    • SignalRecorder
    • SignalRecord
    • ScalarSampler
    • SamplerFactory
    • RotationSampler
    • Driver
    • ColorSampler
    • ArrayOfScalarSignals
    • ArrayOfScalarSamplers
  • AudioModule
    • PlaybackController
  • CameraInfoModule
    • CameraPosition
  • DeepLinkModule
  • DeviceMotionModule
  • DiagnosticsModule
  • FaceGesturesModule
  • FaceTracking2DModule
    • Face2D
  • FaceTrackingModule
    • Cheek
    • Chin
    • Eye
    • Eyebrow
    • Face
    • Forehead
    • Mouth
    • Nose
  • FontsModule
    • FontId
  • HandTrackingModule
    • Hand
  • InstructionModule
  • IrisTrackingModule
    • Eyeball
  • LightingEstimationModule
  • LiveStreamingModule
    • LiveStreamingModule.State
    • LiveStreamingReactions
    • LiveStreamingComments
  • LocaleModule
  • MaterialsModule
    • TextureTransform
    • RetouchingMaterial
    • MetallicRoughnessPbrMaterial
    • MaterialBase
    • DefaultMaterial
    • ColorPaintMaterial
    • BlendShapeToWarpMapMaterial
    • BlendedMaterial
  • NativeUIModule
    • Picker
  • NetworkingModule
  • PatchesModule
  • PersistenceModule
    • StorageScope
  • PersonSegmentationModule
  • RandomModule
  • ReactiveModule
    • AntiderivativeOverflowBehaviour
    • BoundingBoxSignal
    • ISignal
    • PixelPointSignal
    • PixelSizeSignal
    • Point2D
    • Point2DSignal
    • Point3D
    • Point4DSignal
    • PointSignal
    • PrimitiveOrShaderSignal
    • RgbaSignal
    • BoolSignal
    • Rotation
    • RotationSignal
    • ScalarSignal
    • ScalarValue
    • ScaleSignal
    • ShaderSignal
    • StringSignal
    • StringValue
    • Subscription
    • BoolValue
    • VectorSignal
    • TransformSignal
    • ColorSignal
    • EulerAnglesSignal
    • EventSource
    • HsvaSignal
    • InsetsSignal
  • SceneModule
    • AmbientLightSource
    • BrushType
    • HorizontalAlignment
    • RenderMode
    • ScalingOption
    • TextAlignment
    • TrackingMode
    • SpotLightSource
    • PointLightSource
    • DirectionalLightSource
    • HandTrackerSceneObject
    • Canvas
    • DynamicExtrusion
    • FaceAnchor
    • FaceMesh
    • VerticalTextAlignment
    • VerticalAlignment
    • FaceTracker
    • FocalPlane
    • FocalDistance
    • OutputVisibility
    • Mesh
    • Joint
    • PlaneTracker
    • Plane
    • PlanarText
    • PlanarObject
    • PlanarImage
    • PlanarFlexItem
    • PlanarDiv
    • ParticleTypeDescriptions
    • ParticleSystem
    • ParticleTypeDescription
    • PlanarFlexContainer
    • TextExtrusion
    • SvgImage
    • BlendShapesMesh
    • BlockSceneRoot
    • BoundingBox
    • Bounds2D
    • Camera
    • CameraVisibility
    • BlendShape
    • Scene
    • SceneObjectBase
    • ScreenPlane
    • Skeleton
    • segmentation
    • Speaker
    • Transform
    • TargetTracker
    • TextAlignmentWrapper
    • WorldTransform
    • SceneObject
  • ShadersModule
    • VertexAttribute
    • SdfVariant
    • PhysicallyBasedMaterialTextures
    • GradientType
    • FacePaintMaterialTextures
    • DerivativeType
    • DefaultMaterialTextures
    • ColorSpace
    • BuiltinUniform
    • BlendMode
    • BlendedMaterialTextures
  • SvgsModule
  • TexturesModule
    • State
    • SourceImageRegionTexture
    • SubTexture
    • TextureBase
    • CameraTexture
    • CanvasTexture
    • ColorTexture
    • DeepLinkTexture
    • ExternalTexture
    • ImageTexture
    • SegmentationTexture
    • SequenceTexture
  • TimeModule
  • TouchGesturesModule
    • Type
    • TouchGestureModule.Gesture.State
    • Gesture
    • LongPressGesture
    • PanGesture
    • PinchGesture
    • RawTouchGesture
    • RotateGesture
    • TapGesture
  • UnitsModule
Powered by GitBook
On this page
  • Example
  • Properties
  • Methods
  • Classes

Was this helpful?

TouchGesturesModule

The TouchGesturesModule class enables touch gesture detection.

Example

//==============================================================================
// The following example demonstrates how to subscribe to all touch events to
// control the rotation, scale, position, material and opacity of a plane.
//
// Project setup:
// - Insert a plane
// - Increase the x and y-axis scale values of the plane to 2
// - Create two materials with different colors
// - Assign one of the materials to the plane
// - Enable all Touch Gestures under the Touch Gesture capability
//==============================================================================

// Load in the required modules
const Materials = require('Materials');
const Scene = require('Scene');
const TouchGestures = require('TouchGestures');

// Locate the plane in the Scene
const plane = Scene.root.find('plane0');

//==============================================================================
// Change the material applied to the plane when the plane is tapped
//==============================================================================

// Locate the materials in the Assets
const material = Materials.get('defaultMaterial0');
const material2 = Materials.get('defaultMaterial1');

// Subscribe to tap gestures on the plane
TouchGestures.onTap(plane).subscribe(function (gesture) {

  // Switch materials depending on which one is currently applied to the plane
  if(plane.materialIdentifier === material.identifier) {
    plane.material = material2;
  } else {
    plane.material = material;
  }

});

//==============================================================================
// Make the plane's material transparent when the plane is long pressed
//==============================================================================

// Subscribe to long press gestures on the plane
TouchGestures.onLongPress(plane).subscribe(function (gesture) {

  // Set the opacity to 50%
  plane.material.opacity = 0.5;

  // Subscribe to the state of the gesture
  gesture.state.monitor().subscribe(function (state) {

    // Return the opacity to 100% when the gesture ends
    if(state.newValue !== 'BEGAN' && state.newValue !== 'CHANGED') {
      plane.material.opacity = 1;
    }

  });

});

//==============================================================================
// Move the plane across the screen when dragging it with a finger
//==============================================================================

// Store a reference to the transform of the plane
const planeTransform = plane.transform;

// Subscribe to pan gestures on the plane
TouchGestures.onPan(plane).subscribe(function (gesture) {

  // Translate the position of the finger on the screen to the plane's
  // co-ordinate system
  const gestureTransform = Scene.unprojectToFocalPlane(gesture.location);

  // Update the position of the plane
  planeTransform.x = gestureTransform.x;
  planeTransform.y = gestureTransform.y;

});

//==============================================================================
// Scale the plane when pinching it with two fingers
//==============================================================================

// Subscribe to pinch gestures on the plane
TouchGestures.onPinch(plane).subscribe(function (gesture) {

  // Store the last known x and y-axis scale values of the plane
  const lastScaleX = planeTransform.scale.x.pinLastValue();
  const lastScaleY = planeTransform.scale.y.pinLastValue();

  // Update the scale of the plane by multiplying the last known scale with the
  // scale returned by the gesture
  planeTransform.scaleX = gesture.scale.mul(lastScaleX);
  planeTransform.scaleY = gesture.scale.mul(lastScaleY);

});

//==============================================================================
// Rotate the plane when rotating it with two fingers
//==============================================================================

// Subscribe to rotation gestures on the plane
TouchGestures.onRotate(plane).subscribe(function (gesture) {

  // Store the last known z-axis rotation value of the plane
  const lastRotationZ = planeTransform.rotationZ.pinLastValue();

  // Update the z-axis rotation of the plane by adding the gesture rotation and
  // multiply it by -1 to have it rotate in the correct direction
  planeTransform.rotationZ = gesture.rotation.mul(-1).add(lastRotationZ);

});

Properties

This module exposes no properties.

Methods

Method

Description

onLongPress

onLongPress(): EventSource onLongPress(object: SceneObjectBase): EventSource onLongPress(options: {object?: SceneObjectBase, normalizeCoordinates?: boolean}): EventSource

When object is specified, only events for the specified object are emitted.

onPan

onPan(): EventSource onPan(object: SceneObjectBase): EventSource onPan(options: {object?: SceneObjectBase, normalizeCoordinates?: boolean}): EventSource

When object is specified, only events for the specified object are emitted.

onPinch

onPinch(): EventSource onPinch(object: SceneObjectBase): EventSource onPinch(options: {object?: SceneObjectBase, normalizeCoordinates?: boolean}): EventSource

When object is specified, only events for the specified object are emitted.

onRotate

onRotate(): EventSource onRotate(object: SceneObjectBase): EventSource onRotate(options: {object?: SceneObjectBase, normalizeCoordinates?: boolean}): EventSource

When object is specified, only events for the specified object are emitted.

onTap

onTap(): EventSource onTap(object: SceneObjectBase): EventSource onTap(options: {object?: SceneObjectBase, normalizeCoordinates?: boolean}): EventSource

When object is specified, only events for the specified object are emitted.

Classes

Class

Description

The Gesture class encapsulates details of a detected gesture.

The LongPressGesture class contains the details of a detected long-press gesture.

The PanGesture class contains the details of a detected pan gesture.

The PinchGesture class contains the details of a detected pinch gesture.

The RawTouchGesture class encapsulates raw touch data.

The RotateGesture class contains the details of a detected rotate gesture.

The TapGesture class contains the details of a detected tap gesture.

PreviousTimeModuleNextType

Last updated 5 years ago

Was this helpful?

Returns an , to which you may subscribe, that emits a object for each long-press interaction.

Returns an , to which you may subscribe, that emits a object for each pan interaction.

Returns an , to which you may subscribe, that emits a object for each pinch interaction.

Returns an , to which you may subscribe, that emits a object for each rotate interaction.

Returns an , to which you may subscribe, that emits a object for each tap interaction.

EventSource
LongPressGesture
EventSource
PanGesture
EventSource
PinchGesture
EventSource
RotateGesture
EventSource
TapGesture
Gesture
LongPressGesture
PanGesture
PinchGesture
RawTouchGesture
RotateGesture
TapGesture