Skip to content

Instantly share code, notes, and snippets.

@robksawyer
Last active August 15, 2022 11:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robksawyer/c6e3b39053d79a8e7b4ce89fba37596a to your computer and use it in GitHub Desktop.
Save robksawyer/c6e3b39053d79a8e7b4ce89fba37596a to your computer and use it in GitHub Desktop.
An example of how to convert Euler to Quaternions and use slerp for rotation.
// Rotations
const step = 'q1';
const cameraRotations = {
q1: {
x: 0.75,
y: 0,
z: 0,
},
q2A: {
x: -0,
y: 0,
z: -0,
},
q2B: {
x: -0,
y: 0,
z: -0,
},
q3: {
x: -0,
y: 0,
z: -0,
},
q4: {
x: -0,
y: 0,
z: -0,
},
};
const vecR = new THREE.Quaternion();
const tEuler = new THREE.Euler();
const tRotVals = Object.values(cameraRotations[step]);
// Set latest Euler rotation values
tEuler.set(...tRotVals, 'XYZ');
// Convert the Euler rotation to a Quaternion rotation
vecR.setFromEuler(tEuler);
useFrame(({ clock, camera }, delta) => {
if (!DEBUG_MODE && rotations[step]) {
cam.current.quaternion.slerp(vecR, 0.075);
...
cam.current.updateProjectionMatrix();
cam.current.updateMatrix();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment