Add offset to DeviceOrientationControls in three.js

Question

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 1

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