CODEWITHSUNDEEP
javascriptmaththree.jsrotation
Jan Klopper
Jan Klopper

Reputation: 41

three.js rotation of camera around Y Axis seems off

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

Example: We have a "room" setup. Camera in the center, at which point rotation of the camera is tied 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 animationFrame call, we check the camera's 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:

However, Theta seems be consistently off by a factor. Phi and Pitch seem ok. We Transform the radians into degrees by doing for example: pitch * (180/Math.PI)

The world and camera itself seem to update and rotate just fine and rotating the phone / VR glasses to the left or right seem to produce and natural "looking around the room" movement.

Taking these measurements are done by checking the rotation over one axis at a time, and mostly keeping the other two facing the original direction.

What are we missing?

Upvotes: 3

Views: 1233

Answers (2)

Jan Klopper
Jan Klopper

Reputation: 41

So, we managed to dig deeper into this. We build a cnc rotating table, and measured angles on the phones, and compared with the input we gave to the computer controlled rotating table.

Conclusion: Chrome is piece of crap. It cannot and will not produce even nearly useful data. Nor will it produce anything even remotely near repeatable.

Firefox on the same phones has some issues with flipping the axis at some points (probably gimbal lock related or something due to rotation overflowing over 360deg) but manages to be very much near our input (less than 1% off) and is super reliable and repeatable.

Upvotes: 1

Lodewijk Bogaards
Lodewijk Bogaards

Reputation: 19989

You can call camera.getWorldRotation() to get euler angles.

Upvotes: 0

Related Questions