Skip to content

Commit af59947

Browse files
le0mle0m
authored
Merge pull request #35 from AR-js-org/gestures-for-marker
added gestures
2 parents f436494 + 71bcc51 commit af59947

File tree

4 files changed

+40
-10
lines changed

4 files changed

+40
-10
lines changed

‎src/modules/marker/templates/pattern.3d.handlebars‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
55
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
66
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
7-
7+
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
8+
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
89
</head>
910

1011
<body style="margin : 0px; overflow: hidden;">
@@ -13,7 +14,9 @@
1314
loading-screen="enabled: false;"
1415
renderer="logarithmicDepthBuffer: true;"
1516
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
17+
id="scene"
1618
embedded
19+
gesture-detector
1720
>
1821
<a-assets>
1922
<a-asset-item
@@ -27,11 +30,18 @@
2730
type="pattern"
2831
preset="custom"
2932
url="assets/marker.patt"
33+
raycaster="objects: .clickable"
34+
emitevents="true"
35+
cursor="fuse: false; rayOrigin: mouse;"
36+
id="markerA"
3037
>
3138
<a-entity
39+
id="bowser-model"
3240
scale="{{assetParam.scale}} {{assetParam.scale}} {{assetParam.scale}}"
3341
animation-mixer="loop: repeat"
3442
gltf-model="#animated-asset"
43+
class="clickable"
44+
gesture-handler
3545
></a-entity>
3646
</a-marker>
3747

‎src/modules/marker/templates/pattern.image.handlebars‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,34 @@
33
<head>
44
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
55
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
6+
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
7+
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
68
</head>
79

810
<body style="margin : 0px; overflow: hidden;">
911
<a-scene
1012
vr-mode-ui="enabled: false;"
1113
loading-screen="enabled: false;"
1214
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
15+
id="scene"
1316
embedded
17+
gesture-detector
1418
>
1519
<a-marker
1620
id="animated-marker"
1721
type="pattern"
1822
preset="custom"
1923
url="assets/marker.patt"
24+
raycaster="objects: .clickable"
25+
emitevents="true"
26+
cursor="fuse: false; rayOrigin: mouse;"
27+
id="markerA"
2028
>
2129
<a-image
2230
src="{{assetPath}}"
2331
scale="{{assetParam.scale}} {{assetParam.scale}} {{assetParam.scale}}"
32+
class="clickable"
33+
gesture-handler
2434
></a-image>
2535
</a-marker>
2636

‎src/modules/marker/templates/pattern.video.handlebars‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@
33
<head>
44
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
55
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
6+
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
7+
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
68
</head>
79

810
<body style='margin : 0px; overflow: hidden;'>
911
<a-scene
1012
vr-mode-ui="enabled: false"
1113
loading-screen="enabled: false;"
1214
arjs='sourceType: webcam; debugUIEnabled: false;'
15+
id="scene"
1316
embedded
17+
gesture-detector
1418
>
1519

1620
<a-assets>
@@ -37,12 +41,18 @@
3741
smoothCount="10"
3842
smoothTolerance="0.01"
3943
smoothThreshold="5"
44+
raycaster="objects: .clickable"
45+
emitevents="true"
46+
cursor="fuse: false; rayOrigin: mouse;"
47+
id="markerA"
4048
>
4149
<a-video
4250
src="#vid"
4351
scale="{{assetParam.scale}} {{assetParam.scale}} {{assetParam.scale}}"
4452
position="0 0.1 0"
4553
rotation="-90 0 0"
54+
class="clickable"
55+
gesture-handler
4656
></a-video>
4757
</a-marker>
4858

‎src/modules/marker/tools/gesture-handler.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* global AFRAME, THREE */
22

3-
AFRAME.registerComponent("gesture-handler", {
3+
AFRAME.registerComponent('gesture-handler', {
44
schema: {
55
enabled: { default: true },
66
rotationFactor: { default: 5 },
@@ -16,28 +16,28 @@ AFRAME.registerComponent("gesture-handler", {
1616
this.initialScale = this.el.object3D.scale.clone();
1717
this.scaleFactor = 1;
1818

19-
this.el.sceneEl.addEventListener("markerFound", (e) => {
19+
this.el.sceneEl.addEventListener('markerFound', (e) => {
2020
this.isVisible = true;
2121
});
2222

23-
this.el.sceneEl.addEventListener("markerLost", (e) => {
23+
this.el.sceneEl.addEventListener('markerLost', (e) => {
2424
this.isVisible = false;
2525
});
2626
},
2727

2828
update: function() {
2929
if (this.data.enabled) {
30-
this.el.sceneEl.addEventListener("onefingermove", this.handleRotation);
31-
this.el.sceneEl.addEventListener("twofingermove", this.handleScale);
30+
this.el.sceneEl.addEventListener('onefingermove', this.handleRotation);
31+
this.el.sceneEl.addEventListener('twofingermove', this.handleScale);
3232
} else {
33-
this.el.sceneEl.removeEventListener("onefingermove", this.handleRotation);
34-
this.el.sceneEl.removeEventListener("twofingermove", this.handleScale);
33+
this.el.sceneEl.removeEventListener('onefingermove', this.handleRotation);
34+
this.el.sceneEl.removeEventListener('twofingermove', this.handleScale);
3535
}
3636
},
3737

3838
remove: function() {
39-
this.el.sceneEl.removeEventListener("onefingermove", this.handleRotation);
40-
this.el.sceneEl.removeEventListener("twofingermove", this.handleScale);
39+
this.el.sceneEl.removeEventListener('onefingermove', this.handleRotation);
40+
this.el.sceneEl.removeEventListener('twofingermove', this.handleScale);
4141
},
4242

4343
handleRotation: function(event) {

0 commit comments

Comments
 (0)