Rotate the camera around the Y axis.

We are making a VR / Stereoscopic web application with the tag. js where we would like to display the angle the camera is looking at.

Example: We have a "room". The center camera from which the camera's pivot point is anchored to the orbital controls.

# create a camera and place it in the scene
camera = new THREE.PerspectiveCamera(90, 1, 0.1, 2000);
camera.position.set(0, 35, 60);
# Attach Orbital controls
controls = new THREE.OrbitControls(camera, element);
controls.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z);
controls.enableZoom = true;
controls.enablePan = true;
# Attach DeviceOrientationControls
controls = new THREE.DeviceOrientationControls(camera, true);
controls.connect();
controls.update();

      

        
        
        
      

    

Now, during each animation call, we check the camera vector:

vector = camera.getWorldDirection();
theta = Math.atan2(vector.x, vector.z);
phi = Math.sqrt((vector.x * vector.x) + (vector.z * vector.z));
pitch = Math.atan2(phi, vector.y);

      

        
        
        
      

    

Expecting the following in radians:

• Theta should be rotated from the original direction (Z), as if you were looking down from the (Y) axis. (think of a clock on the ground under the camera)
• Phi is the height from the original direction (z) up or down. (Think of a clock on the camera side.)
• The pitch will be a rotation around the Z axis when looking down the original Z vector. (Think of the clock on the back of the camera.)

However, Theta seems to be constantly shutting down. Phi and Pitch look ok. Convert radians to degrees, for example:pitch * (180/Math.PI)

The world and the camera itself seem to refresh and rotate just fine, and turning the phone / VR glasses left or right seems to produce and natural "look around the room" movement.

Taking these measurements is done by checking rotation one axis at a time, and basically holding the other two towards the original.

What are we missing?