Skip to content

Instantly share code, notes, and snippets.

@robksawyer

robksawyer/rotation-example-slerp.js

Last active August 15, 2022 11:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save robksawyer/c6e3b39053d79a8e7b4ce89fba37596a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save robksawyer/c6e3b39053d79a8e7b4ce89fba37596a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. robksawyer revised this gist Aug 15, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions rotation-example-slerp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    // Rotations
    const step = 'q1';
    const cameraRotations = {
    q1: {
    x: 0.75,
  2. robksawyer revised this gist Aug 15, 2022. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions rotation-example-slerp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,32 @@
    // Rotations
    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]);
  3. robksawyer created this gist Aug 15, 2022.
    17 changes: 17 additions & 0 deletions rotation-example-slerp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    // Rotations
    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();
    }
    });