AR.js & A-Frame Gestures

Example of using gesture events on AR.js with A-Frame. This work is based on this example from 8th Wall.

Scale and rotate 3D elements from your AR.js scene using gesture-detector and gesture-handler components.

Try now!

Image Tracking

🚀Open this sample on your phone and scan this picture

Marker Tracking

🚀Open this sample on your phone and scan this marker

Installation

Import this file if you want default touch events. Keep reading to learn how to extend it.

<script src="https://raw.githack.com/fcor/arjs-gestures/master/dist/gestures.js"></script>

How it works?

gesture-detector listens to regular touch events directly on a-scene and emits a custom event indicating how many fingers were involved ("one", "two", "three" or "many") and passing some details of the event, like the position, spread and coordinates where user touched the screen. This component was developed by 8th Wall for their A-Frame based demos and can be found here.

gesture-handler adds listeners for custom gesture events, emitted by gesture-detector. This component should be placed on the 3D element we want to control and it automaticaly detects if the marker or image is found or lost to ensure the element could only be manipulated if it's actually visible. This component could be customized via properties. Currently supports pinch to zoom and finger spin for rotating the element.

Properties

Property	Description	Default Value
enabled	Whether gesture controls are enabled.	true
rotationFactor	Factor for controlling rotation	5
minScale	Minimum scale applied to the 3D element	0.3
maxScale	Minimum scale applied to the 3D element	8

Examples

Image Tracking

<a-scene
  arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
  embedded
  renderer="logarithmicDepthBuffer: true;"
  vr-mode-ui="enabled: false"
  gesture-detector
  id="scene"
>
  <a-nft
    type="nft"
    url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
    smooth="true"
    smoothCount="10"
    smoothTolerance=".01"
    smoothThreshold="5"
    raycaster="objects: .clickable"
    emitevents="true"
    cursor="fuse: false; rayOrigin: mouse;"
  >
    <a-entity
      gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
      scale="5 5 5"
      position="50 150 0"
      class="clickable"
      gesture-handler="minScale: 0.25; maxScale: 10"
    >
    </a-entity>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>

Marker Tracking

<a-scene
  arjs
  embedded
  renderer="logarithmicDepthBuffer: true;"
  vr-mode-ui="enabled: false"
  gesture-detector
  id="scene"
>
  <a-assets>
    <a-asset-item
      id="bowser"
      src="https://cdn.glitch.com/06bd98b4-97ee-4c07-a546-fe39ca205034%2Fbowser.glb"
    >
    </a-asset-item>
  </a-assets>

  <a-marker
    preset="hiro"
    raycaster="objects: .clickable"
    emitevents="true"
    cursor="fuse: false; rayOrigin: mouse;"
    id="markerA"
  >
    <a-entity
      id="bowser-model"
      gltf-model="#bowser"
      position="0 0 0"
      scale="0.05 0.05 0.05"
      class="clickable"
      gesture-handler
    >
    </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

Credits

Kudos to 8th wall for sharing their A-Frame Manipulate example!

Bowser 3D model was made by santiago3052008 and can be found here