Skip to content

Rotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene

License

Notifications You must be signed in to change notification settings

fcor/arjs-gestures

Repository files navigation

AR.js & A-Frame Gestures

gesture sample

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

About

Rotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published