Creating vertical camera rotation touch control for mobile using A-Frame

Question

I'm developing a lot these days with A-Frame, but more specifically targeting mobile. One thing I noticed is that the touch controls for mobile only allow for horizontal camera rotation movement(left/right). I realize the gyroscope is to be a huge factor in camera rotation movement, but it would be nice to have full control of the camera using touch (horizontal and vertical). The default setting for the camera only allows horizontal rotation movement. I haven't seen were to implement certain properties to the camera entity, or to write some script. Is there a simple boolean property I can set on an entity, or am I completely off base?

Answer 1

I didn't see any properties to do this on the built in look-controls component. So the next step would be to create your own version and modify the touchmove function.

I've created a starter project to help you jump in: https://glitch.com/edit/#!/a-frame-touch-look-controls

Instead of using the native look-controls I've created a mod called touch-look-controls.

Inside the touchmove function I've added a few lines so that it affects both x and y axis:

onTouchMove: function (evt) {
  var canvas = this.el.sceneEl.canvas;
  var deltaX, deltaY;
  var pitchObject = this.pitchObject;
  var yawObject = this.yawObject;

  if (!this.touchStarted || !this.data.touchEnabled) { return; }

  deltaY = 2 * Math.PI * (evt.touches[0].pageX - this.touchStart.x) / canvas.clientWidth;
  deltaX = 2 * Math.PI * (evt.touches[0].pageY - this.touchStart.y) / canvas.clientHeight;

  // Allow touch orientaion to both x and y
  yawObject.rotation.y -= deltaY * 0.5;
  pitchObject.rotation.x -= deltaX * 0.5;
  pitchObject.rotation.x = Math.max(-PI_2, Math.min(PI_2, pitchObject.rotation.x));
  this.touchStart = {
    x: evt.touches[0].pageX,
    y: evt.touches[0].pageY
  };
},

PS: I didn't thoroughly test how this affects VR mode, plus it looks like the gyroscope is set off when using the component (a bug from copy pasting the look-controls) so just keep that in mind.

PPS: you can see the native look-controls code here: https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js