Properly animate rotation on Three.js using gsap

[aka_lux]

Hi everyone, I have a problem, basically I wanted to create a smooth transition between the current rotation of a model and another rotation. Problem is that the direction of the rotation is really ugly, it basically goes counterclock. I know gsap has functions like "_cw" "_ccw" "_short" but if I use them it messes up the values of the location for some reason. This is the function to rotate the object:

gsap.to(peeler_model.rotation, {
    x: degToRad(129.2),
    y: degToRad(-1.9),
    z: degToRad(-25.2),
    duration: 2,
})

This is what happens:

Link to the video

[GreenSock]

Yeah, the directional rotation shortcuts like that are just for DOM elements but you're using a Three.JS target. You could probably use this plugin: 

 

It's a fundamental issue of forcing the animation to a different number that's rotationally closer or further linearly. 

 

I hope that helps. 

[aka_lux]

9 hours ago, GreenSock said:

Yeah, the directional rotation shortcuts like that are just for DOM elements but you're using a Three.JS target. You could probably use this plugin: 

 

It's a fundamental issue of forcing the animation to a different number that's rotationally closer or further linearly. 

 

I hope that helps. 

 

Are you sure the "use radians" is optional? Because I wrote "129.2_ccw" for my x rotation but the final rotation in degrees is 7402

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[aka_lux]

On 9/13/2024 at 5:51 PM, GSAP Helper said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

 

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Hey, after a bit of thinking I have a solution that also might help others, searching around I figured that the Three.js objects use Euler angles, but by using Quaternons the object actually takes the shortest path to rotate, it's not as simple as tweening the rotation with gsap but it's not too complicate.

 

I first set the quaternions of the object to (0, 0, 0, 1) just to be sure (yes quaternion has actually 4 values, the last one called "w", a factor needed to use quaternions) like this:

obj.quaternion.set(0,0,0,1)

This was because I wanted my object to go from (0, 0, 0) rotation to another one, if for example you want your object to go from (90, 0, 180) to another one, then you should set those rotations at the beginning. I strongly suggest to use the function below in this case because I don't know how the w factor behaves.

 

If you want an example on how to combine the function below and set the quaternions to (90, 0, 180) for example here's one, to understand at best what I'm doing go see what the function EulQuat.eul_to_quat() is doing below:

const initialRotations = EulQuat.eul_to_quat(90, 0, 180);
obj.quaternion.set(initialRotations.x, initialRotations.y, initialRotations.z, initialRotations.w);

 

Anyways, then I created an object called "progress" which contains a property called "t" which will be animated from 0 to 1 every time I want to tween the rotation:

const progress = { // Progress for animating quaternions
  	t: 0,
}

I created then a function to help me convert Euler angles to Quaternions easily:

const EulQuat = { // Object to contain I created to contain useful function I may need in the future (not needed)
    eul_to_quat: (x, y, z) => { // Euler to Quaternion angle converter, needed
        const quat = new THREE.Quaternion();
        const eul = new THREE.Euler(degToRad(x), degToRad(y), degToRad(z));
        return  quat.setFromEuler(eul);
    },
}

Lastly I need to use this setup with gsap to animate the quaternions and the object will take the shortest path when rotating:

const tl = gsap.timeline(); // Should be working fine also by just using gsap to animate, I preferred to use a timeline

tl.fromTo(progress, {
    t: 0, // Setting t always to 0 before starting the animation
},
{
    t: 1, // Animating t to 1
    scrollTrigger: {
      trigger: '.your-trigger',
      start: 'top top',
      end: 'bottom bottom',
      scrub: 1, // I always worked with scrub, should be working fine even if scrub isn't enabled
      immediateRender: false, // To keep animation from glitching if there was a previous rotation
    },

    onUpdate: () => {
      obj.quaternion.slerpQuaternions( // Using slerpQuaternions() built in function of Object3D Quaternion
        EulQuad.eul_to_quad(-90, 0, 90), // Starting quaternion position [THIS IS AN EXAMPLE]
        EulQuad.eul_to_quad(-47, 7.5, -155.2), // Ending quaternion position [THIS IS AN EXAMPLE]
        progress.t // Progress t that gets animated
      )
    },
})

After that everything should be working fine, enjoy your rotation!