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
Marker Tracking
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