How to save and restore rotation correctly with quaternion?

Questions
1

In our case I need rotate an object and save the data, as I enter this page next time, the object is loaded with the same ration state.

I found an API from the docs and I used object.quaternion for the rotation:

var deltaRotationQuaternion = new Three.Quaternion().setFromEuler(new Three.Euler(toRadians(deltaMove.y * 0.5), toRadians(deltaMove.x * 0.5), 0, "XYZ"));

this.object.quaternion.multiplyQuaternions(deltaRotationQuaternion, this.object.quaternion);

this.object.quaternion.toArray()

so I got a quaternion in an array. Then when I open this page again, I initialized quaternion from that array:

let rotationQuaternion = new Quaternion();
let r1 = rotationQuaternion.fromArray(rotationData || [0, 0, 0, 1]);

gltf.scene.applyQuaternion(r1);

However as I ran it, it’s not showing objects with the same rotation. Probably I used it wrong. What’s the correct way to save the rotation.

I don’t like to use Euler Angle. Do I have to switch to that?

2

When you update this.object.rotation, this.object.quaternion is calculated automatically by three.js. You don’t have to do this manually. Besides, gltf.scene.quaternion.copy( r1 ) is better.

Can you demonstrate your problem with a simple live example?

1 Like