Go towards or away from the model in mobile

Question

From the code on my previous answer, I get a WebVR page that works fine in Desktop but in the mobile phone I'm not able to go closer to the model (looks more like a skybox).

Would like to be able to go towards / away from the model (using two fingers going, respectively, away from each other or closer), apart from looking around.

After some searching, found an example of where this functionality I look for is used.

How can I get that same mobile functionality working for my case?

Piotr Adam Milewski · Accepted Answer

1) Orbit controls

If you want your experience to revolve around a model, moving the camera around it, and zooming in and out - I'd say the orbit controls are exacly what You're looking for:

The camera will move around the defined target. Works with mobile touch events. Check it out with gltf models here.

2) Moving the camera with pinching

If you want to move the camera towars or away the direction it's looking at, as far as i know, You'll have to implement such behavior in a custom component. A poor mans version could look a bit like this:

AFRAME.registerComponent('pinch-controls', {
  init: function() {
    // moveCamera uses variables from 'this' scope
    this.moveCamera.bind(this);

    // we'll use this to get the 'pinch direction'
    this.distance = 0;
    // we'll keep here the camera's current direction
    this.direction = new THREE.Vector3();
    // camera entity reference
    this.camera = document.querySelector("[camera]");

    // listeners
    document.body.addEventListener('touchstart', event => {
      // we're interested only in two - finger pinches
      if (event.touches.length != 2) return 0;
      // calculate the distance
      this.distance = this.calculatePinchDistance(event);
      // we don't want the touch to rotate the camera around
      this.el.setAttribute('look-controls', 'touchEnabled', false);
    }, false);

    document.body.addEventListener('touchend', event => {
      // when the pinch ends - restore the look-controls
      if (event.touches.length != 1) this.el.setAttribute('look-controls', 'touchEnabled', true);
    }, false);

    document.body.addEventListener('touchmove', event => {
      // we're interested only in two - finger pinches
      if (event.touches.length != 2) return 0;

      // compare the distances to determine which direction should we move
      var distance = this.calculatePinchDistance(event);
      let speed = (distance < this.distance) ? -0.2 : 0.2;
      this.moveCamera(speed);

      // keep the distance for the next callback
      this.distance = distance;
    }, false);
  }, 
  calculatePinchDistance(event) {
      var dx = event.touches[0].pageX - event.touches[1].pageX;
      var dy = event.touches[0].pageY - event.touches[1].pageY;
      return Math.sqrt(dx * dx + dy * dy);
  },
  moveCamera: function(speed) {
        // get the camera direction, and multiply it by the desired 'speed'
        this.el.sceneEl.camera.getWorldDirection(this.direction);
        this.direction.multiplyScalar(speed);
        // apply the change to the actual position
        var pos = this.el.getAttribute("position");
        pos.add(this.direction);
        this.el.setAttribute("position", pos);
    }
}

// HTML
//

Check it out here

If you want to move the camera towards the model (instead of the direction it's facing), you can just replace extracting the camera direction (in moveCamera) with calculating the camera <-> model direction:

// instead of
// this.el.sceneEl.camera.getWorldDirection(this.direction);
// grab the direction towards the model
this.direction.copy(this.el.object3D.position)
this.direction.add(modelReference.object3D.position)
this.direction.normalize();
// (...)

Tiago edit:

The final code used was



  
    
    Octant Cube - by Dodds, H. & Peres, T.

And this was the final result

Go towards or away from the model in mobile

Answers (1)

1) Orbit controls

2) Moving the camera with pinching

Tiago edit:

Related Questions