3

I'm loading this Collada (DAE) model with aframe 0.8.2 and using aframe-ar to display it over a Hiro marker:

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best; debugUIEnabled: false;'>
      <!--a-marker type='pattern' url='https://rawgit.com/germanviscuso/AR.js/master/data/data/patt.gafas'-->
      <a-marker preset='hiro'>
        <a-collada-model src="url(https://aframe.io/aframe/examples/showcase/shopping/man/man.dae)"></a-collada-model>
      </a-marker>
      <a-camera-static/>
    </a-scene>
</body>

Codepen: https://codepen.io/germanviscuso/pen/KRMgwz

I would like to know how to add controls to rotate it on its Y axis (with respect to the marker) by using swipe gestures on a mobile phone browser and to scale the model dynamically when doing pinch gestures. Ideally it would be nice if it also works with the mouse/touchpad when I'm testing in my laptop but touch on the phone is enough.

Can universal-controls handle this? Any example that I can see? This has to work while the model is being rendered dynamically with respect to the marker (AR tracking).

Any help is appreciated, thanks!

German
  • 10,263
  • 4
  • 40
  • 56

1 Answers1

3

I wouldn't use the "native" controls based off raycaststers. Instead I would use any js gesture detection library. In this example i used hammer.js.

hammer.js registers an object which emits events when pan, swipe, pinch gestures are detected. I've created the object with the listeners in an a-frame component.

  1. When pan is detected i just rotate the model depending on the direction (2 - left, 4 - right, 8 - up, 16 - down)

  2. When pinch is detected i change the scale, depending on the event value, you can multiply by any factor. The component is below:

    AFRAME.registerComponent("foo",{ init:function() { var element = document.querySelector('body'); this.marker = document.querySelector('a-marker') var model = document.querySelector('a-collada-model'); var hammertime = new Hammer(element); var pinch = new Hammer.Pinch(); // Pinch is not by default in the recognisers hammertime.add(pinch); // add it to the Manager instance

       hammertime.on('pan', (ev) => {
     let rotation = model.getAttribute("rotation")
     switch(ev.direction) {
       case 2:
         rotation.y = rotation.y + 4
         break;
       case 4:
         rotation.y = rotation.y - 4
         break;
       case 8:
         rotation.x = rotation.x + 4
         break;
       case 16:
         rotation.x = rotation.x - 4
         break;
       default:
         break;
     }
     model.setAttribute("rotation", rotation)
   });

  hammertime.on("pinch", (ev) => {
     let scale = {x:ev.scale, y:ev.scale, z:ev.scale}
     model.setAttribute("scale", scale);
 });

    } });

Working glitch here. In my example i also check if the marker is visible, thought it could be convinient.

Working example here

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42