art.mu art.mu - 5 months ago 184
Javascript Question

Add offset to DeviceOrientationControls in three.js

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

deviceControls.update();
command. I used
DeviceOrientationControls
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(), camera.target, THREE.Object3D.DefaultUp.clone());

const quater = new THREE.Quaternion();
quater.setFromRotationMatrix(m1);

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

camera.quaternion.copy(finalQuater);


camera.target
is my final drag target (Vector3), and
camera.quaternion
has been set by
deviceControls.update()
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

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

Comments