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

# 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?

##### 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

• 3
• 1
##### 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