Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Aitor

Rotating object with quaternion property

Go to solution Solved by akapowl,

Recommended Posts

I'm not sure this question is right for this forum. My appologies in advance.

 

I have an object body (from cannon-es library but it is not relevant). Then, I can animate some properties like position, this way:

 

gsap.to(
    body.position,
    {
        duration:1,
        y: body.position.y + 10
    }
)

 

Now, I want to rotate it, but rotation in this kind of object must be done with a setFromAxisAngle() function in its quaternion property, not changing a property directly:

 

body.quaternion.setFromAxisAngle(
    new CANNON.Vec3(0, 1, 0),
    Math.PI * 0.5 
)

So, I want to animate the floating value '0.5' in this line:

Math.PI * 0.5

 

Is it possible? Which is the right approach to do it?

Link to comment
Share on other sites

  • Solution

Hello @Aitor

 

It's always best to include a minimal demo for people here to tinker with (as the forum guidelines state) that makes it way easier to provide you with a suitable solution.

 

Technically you can tween any value with GSAP, so you could e.g. set up an object with a value and onUpdate of a tween on that value, update what you need to with that value.

 

I have no experience with cannon.js whatsoever, so I'm not sure if there is an easier way (but judging from the little experience I have with three.js and this scenario being sort of similar to how to tween certain properties in three.js, I don't really think so), but here is what I came up with. Hope it helps :)

 

let sphereRotation = { val: 0 };

gsap.to( sphereRotation, { duration: 5, val: 2, repeat: -1, yoyo: true, ease: "power1.inOut", onUpdate: updateRotation })

function updateRotation() {
  sphereBody.quaternion.setFromAxisAngle(
    new CANNON.Vec3(0, 1, 0),
    Math.PI * sphereRotation.val
  )
}

 

See the Pen 5e21f51cc80e45865d72ec08d556afd2 by akapowl (@akapowl) on CodePen

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • Aitor changed the title to Rotating object with quaternion property

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×