Looking for a way in aframe to rotate and scale a model via touch when rendered over a marker

问题

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!

回答1:

I wouldn't use the "native" controls based off raycaststers. Most of the cursors are not working properly in ar.js (at least in my experience).

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.

来源：https://stackoverflow.com/questions/50197836/looking-for-a-way-in-aframe-to-rotate-and-scale-a-model-via-touch-when-rendered

标签

aframe

ar.js