Adjusting for the differences in camera rotation value between non-vr and vr mode in aframe

Question

I'm working on a WebVR scene in Aframe where there are various miniature 3d scenes (roughly eight) that surround the viewer; you have to rotate to look at the different scenes.

The number of scenes exceeds what can be fit into 360 degrees of rotation, so I'm loading/offloading content by checking the current rotation of the camera. For example, scene number seven is only visible when the y value of the a-camera is between 720 and 840 degrees (converted to radians).

This only works because when you are not in VR mode, the y value of the camera goes from 0 to infinity in both directions.

However, in non vr mode, the way the camera rotation works is different. In VR mode, the y rotation of the camera is either between 0 and 180, or 0 and -180. IE IF rotating counter clockwise, the y value will tick over from 180 to -180. So my previous system of working out what subscenes are currently visible no longer works.

Trying to figure out a way of converting the rotation values returned from the camera in Vr mode to something more like the way it works in non-vr mode.

Hopefully that makes sense. Honestly, it is a little bit of a head-scratcher...

Here is my code (well in need of refactoring, but I just need it to work for the time being):

if (cameraRotY >= 0 && cameraRotY <= degreesToRadians(120) && !self.is('stonehenge')) {
        removeAllStates(self);
        document.querySelector('#SceneStonehenge').emit('show');
        self.addState('stonehenge');
    } else if (cameraRotY > degreesToRadians(120) && cameraRotY <= degreesToRadians(240) && !self.is('phoneVines')) {
        removeAllStates(self);
        document.querySelector('#ScenePhoneVines').emit('show');
        self.addState('phoneVines');
    } else if (cameraRotY > degreesToRadians(240) && cameraRotY <= degreesToRadians(360) && !self.is('skyFish')) {
        removeAllStates(self);
        document.querySelector('#SceneSkyfish').emit('show');
        self.addState('skyFish');
    } else if (cameraRotY > degreesToRadians(360) && cameraRotY <= degreesToRadians(480) && !self.is('rocksPlanets')) {
        removeAllStates(self);
        document.querySelector('#SceneRocksPlanets').emit('show');
        document.querySelector('#SceneRocksPlanetsContents').emit('show');
        self.addState('rocksPlanets');
    } else if (cameraRotY > degreesToRadians(480) && cameraRotY <= degreesToRadians(600) && !self.is('floatingIslands')) {
        removeAllStates(self);
        document.querySelector('#SceneFloatingIslands').emit('show');
        self.addState('floatingIslands');
    } else if (cameraRotY > degreesToRadians(600) && cameraRotY <= degreesToRadians(720) && !self.is('skywhale')) {
        removeAllStates(self);
        document.querySelector('#SceneSkywhale').emit('show');
        self.addState('skywhale');
    } else if (cameraRotY > degreesToRadians(720) && cameraRotY <= degreesToRadians(840) && !self.is('crack')) {
        removeAllStates(self);
        document.querySelector('#SceneCrack').emit('show');
        self.addState('crack');
    } else if (cameraRotY > degreesToRadians(840) && cameraRotY <= degreesToRadians(960) && !self.is('blackhole')) {
        removeAllStates(self);
        document.querySelector('#SceneBlackhole').emit('show');
        self.addState('blackhole');
    }

My initial thoughts are to adjust something in the look-controls component, but I'm not 100% sure what will work at this point, and am looking for a suggestion. — meyerd02

ngokevin ngokevin · Accepted Answer · 2017-04-10T19:31:58

You can either adjust the look-controls, or you can keep track in a separate variable how many degrees the camera has rotated. Here's the basic code in component form. Not tested, but the basic idea:

AFRAME.registerComponent('total-rotation', {
  dependencies: ['rotation'],

  schema: {
    degrees: {default: 0, type: 'number'}
  },

  init: function () {
    this.previousRotation = this.el.getAttribute('rotation');
  },

  tick: function () {
    var currentRotation = this.el.getAttribute('rotation');
    var totalRotation = this.data.totalRotation;
    totalRotation += currentRotation.y - this.previousRotation.y;
    this.el.setAttribute('total-rotation', 'degrees', totalRotation);
    this.previousRotation = currentRotation;
  }
});

Then attach to the camera:

<a-camera total-rotation></a-camera>

Then you can check the total rotation when you want:

document.querySelector('[camera]').getAttribute('total-rotation').degrees;

Adjusting for the differences in camera rotation value between non-vr and vr mode in aframe

1 Answers