Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fcor/arjs-gestures
Rotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene
https://github.com/fcor/arjs-gestures
aframe ajrs
Last synced: about 5 hours ago
JSON representation
Rotate and zoom with touch gestures on any Image tracking or Marker Based AR.js scene
- Host: GitHub
- URL: https://github.com/fcor/arjs-gestures
- Owner: fcor
- License: mit
- Created: 2020-05-26T23:46:24.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-02-14T10:13:26.000Z (almost 4 years ago)
- Last Synced: 2023-11-07T17:09:34.815Z (about 1 year ago)
- Topics: aframe, ajrs
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 148
- Watchers: 9
- Forks: 77
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
AR.js & A-Frame Gestures
Example of using gesture events on AR.js with A-Frame. This work is based on [this example](https://github.com/8thwall/web/blob/master/examples/aframe/manipulate/README.md) 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](https://fcor.github.io/arjs-gestures/image-tracking.html) on your phone and [scan this picture](https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex-image-big.jpeg)
#### Marker Tracking
🚀[Open this sample](https://fcor.github.io/arjs-gestures/index.html) on your phone and [scan this marker](https://killcloud.nyc3.digitaloceanspaces.com/assets/Hiro_marker_ARjs.png)
## Installation
Import this file if you want default touch events. Keep reading to learn how to extend it.
```html
```
## 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](https://github.com/8thwall/web/blob/master/examples/aframe/manipulate/gesture-detector.js).
`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
```html
```
#### Marker Tracking
```html
```
## Credits
Kudos to 8th wall for sharing their A-Frame Manipulate example!
Bowser 3D model was made by [santiago3052008](https://sketchfab.com/santiago3052008) and can be found [here](https://sketchfab.com/3d-models/bowser-fa17f94ae350416f86c35db7c0e129c3)