- 1 year ago 542
Javascript Question

Add offset to DeviceOrientationControls in three.js

I'm trying to add an offset to the camera after

command. I used
as shown in this first example.

The offset will be the result of a drag gesture, as presents in this example.

When I multiply the 2 quaternions (I have tried a x b and b x a), the final result is not correct.

Here is my operation :

const m1 = new THREE.Matrix4();
m1.lookAt(new THREE.Vector3(),, THREE.Object3D.DefaultUp.clone());

const quater = new THREE.Quaternion();

const finalQuater = new THREE.Quaternion();
finalQuater.multiplyQuaternions(quater, camera.quaternion);

is my final drag target (Vector3), and
has been set by
and is equals to the camera orientation, according to the device gyroscope.

Thanks for your help

Update : I have tried to changer rotate order, same problem. I think it is due to the origin change after the device orientation update, but can't find how to solve.

Answer Source

DeviceOrientationControls now has a property alphaOffsetAngle, and a method

controls.updateAlphaOffsetAngle( angle ); // angle is in radians

that will rotate the scene around the three.js 'Y' axis.

three.js r.77

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download