Reset camera rotation by clicking reset button

Question

I want to make a button. If I click that button it will reset every position as it was. Such as you enter VR. After entering you see some images in front of you. But sometimes because of motion the front scene goes some other position. If you wanna see that again you need to reload that. So I wanna make button that reset every position as it was. How can I do that?

<a-camera position="2 0 15" sound__click="src: #click-sound; on: click; positional: false;" id="listener">
  <a-cursor raycaster="objects: .clickable" 
            fuse-timeout="2000"
            material="color: #F4D03F; shader: flat" 
            opacity="0.9">
  </a-cursor>

</a-camera>



<a-gui-button resetOrientation
          id="resetOrientation"
          class="clickable"              
          position="0.184 -10 -0.032"
          width="2.5" height="0.75"
          key-code="59"
          value="Reset"
          font-family="Helvetica"
          background-color="#A04000"

      >
      </a-gui-button>

This is html code. Here is my javaScript

AFRAME.registerComponent('resetOrientation', {
init: function () {
var button = document.querySelector("#resetOrientation");
var cameraPosition = document.querySelector("#listener");
var resetRotation = { x: 0, y: 0, z: 0 };
button.addEventListener('click', function () {
  var old = cameraPosition.getAttribute('rotation');
  console.log(old);
  var adjustedRotation = {
    x: adjustedRotation.x - old.x,
    y: adjustedRotation.y - old.y,
    z: adjustedRotation.z - old.z
  }
  cameraPosition.setAttribute("rotation", adjustedPosition);
   });
}
});

How can I solve this?

Answer 1

I don't know enough if it's good practice, but for me this works:

var camera = document.querySelector("a-camera");

    camera.components["look-controls"].pitchObject.rotation.x = newX;
    camera.components["look-controls"].yawObject.rotation.y = newY;

Answer 2

We have a recenter component for Supermedium.

Rather than un-rotating the camera, we wrap the whole scene in an entity, and rotate that. Because there was some messiness when trying to read camera rotation in VR, and trying to unset that, with the whole matrix stuff, since three.js handles the VR camera pose. There are also crazy inconsistencies with SteamVR...so there's some special things we do there. Diego spent days on this issue:

/**
 * Pivot the scene when user enters VR to face the links.
 */
AFRAME.registerComponent('recenter', {
  schema: {
    target: {default: ''}
  },

  init: function () {
    var sceneEl = this.el.sceneEl;
    this.matrix = new THREE.Matrix4();
    this.frustum = new THREE.Frustum();
    this.rotationOffset = 0;
    this.euler = new THREE.Euler();
    this.euler.order = 'YXZ';
    this.menuPosition = new THREE.Vector3();
    this.recenter = this.recenter.bind(this);
    this.checkInViewAfterRecenter = this.checkInViewAfterRecenter.bind(this);
    this.target = document.querySelector(this.data.target);

    // Delay to make sure we have a valid pose.
    sceneEl.addEventListener('enter-vr', () => setTimeout(this.recenter, 100));
    // User can also recenter the menu manually.
    sceneEl.addEventListener('menudown', this.recenter);
    sceneEl.addEventListener('thumbstickdown', this.recenter);
    window.addEventListener('vrdisplaypresentchange', this.recenter);
  },

  recenter: function () {
    var euler = this.euler;
    euler.setFromRotationMatrix(this.el.sceneEl.camera.el.object3D.matrixWorld, 'YXZ');
    this.el.object3D.rotation.y = euler.y + this.rotationOffset;
    // Check if the menu is in camera frustum in next tick after a frame has rendered.
    setTimeout(this.checkInViewAfterRecenter, 0);
  },

  /*
   * Sometimes the quaternion returns the yaw in the [-180, 180] range.
   * Check if the menu is in the camera frustum after recenter it to
   * decide if we apply an offset or not.
   */
  checkInViewAfterRecenter: (function () {
    var bottomVec3 = new THREE.Vector3();
    var topVec3 = new THREE.Vector3();

    return function () {
      var camera = this.el.sceneEl.camera;
      var frustum = this.frustum;
      var menuPosition = this.menuPosition;

      camera.updateMatrix();
      camera.updateMatrixWorld();
      frustum.setFromMatrix(this.matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));

      // Check if menu position (and its bounds) are within the frustum.
      // Check bounds in case looking angled up or down, rather than menu central.
      menuPosition.setFromMatrixPosition(this.target.object3D.matrixWorld);
      bottomVec3.copy(menuPosition).y -= 3;
      topVec3.copy(menuPosition).y += 3;

      if (frustum.containsPoint(menuPosition) ||
          frustum.containsPoint(bottomVec3) ||
          frustum.containsPoint(topVec3)) { return; }

      this.rotationOffset = this.rotationOffset === 0 ? Math.PI : 0;
      // Recenter again with the new offset.
      this.recenter();
    };
  })(),

  remove: function () {
    this.el.sceneEl.removeEventListener('enter-vr', this.recenter);
  }
});

In HTML:

 <a-entity id="scenePivot" recenter="target: #frontObject">
    <a-entity id="frontObject" data-description="When resetting, this object will be checked to see if user is facing it or not to confirm the reset."
  </a-entity>

  <a-camera></a-camera>

Answer 3

If you try to adjust the camera itself then it will be instantly overwritten when the user moves the phone.

Instead what you can do is wrap all entities except the camera in an entity then apply a rotation that is the inverse of the current rotation of the camera. You probably also want to apply this solely on the y axis but that's up to you.

var invRot = document.querySelector("#listener").getAttribute('rotation');
invRot.y = -invRot.y;
document.querySelector("#world").setAttribute("position", invRot);

Here in this example the world entity would contain all your content and not the camera.