Rotate around and scale: scale animation is changing mesh position

Questions
1

I’m trying to apply animationGroup with 2 animations at the same time:

  • rotate around
  • scale

Before that, I set the pivot:

    // set pivot
    const pivot = box.position
    const relativePosition = pivot.subtract(sphere.position);
    // relativePosition: {_isDirty: true, _x: 0, _y: 1, _z: -2}

The rotate around animation works fine:

But when I tried to apply the scale animation, it changed the mesh position (WHY? :tired_face:):

Here’s more like what I’m trying to achieve:

  • rotate around while scaling on any axis:

But spheres position keep changing due to pivot. How to fix?

2

OK, I get it using absolutePosition:

1 Like
3

You were setting your sphere pivot point off the box, which is y = 1
So the sphere scaling is pivoting from y+1

2 Likes
4

Yeah… absolutePosition is not the answer :face_with_diagonal_mouth:

// set pivot
const pivot = box.absolutePosition
console.log("pivot", pivot)
// {_isDirty: true, _x: 0, _y: 0, _z: 0}
const relativePosition = pivot.subtract(sphere.position);
console.log("relativePosition", relativePosition)
// relativePosition:{_isDirty: true, _x: 0, _y: 0, _z: -2}
5

Yeah, a relativePosition.y = 0; would solve the problem. The pivot is used to rotate around.

What i didn’t get is how to compensate the scaling maintaining the pivot

Or how to make these 2 animations work together on any axis

6

Note that you must call box.computeWorldMatrix(true); for the absolutePosition property to be updated correctly.

1 Like
7

As @withADoveInOneHand pointed y+1, Setting axis:0 I was able to rotate and scale at the same time:

I’m not happy with the result, seems pretty unstable. At least the objective of the issue was achieved :laughing:

Thank you guys :saluting_face:

1 Like
8

Here we can see how the rotationAnimation + scaleAnimation don’t walk in a perfect circle around the target (box):

  • redSphere : rotationAnimation + scaleAnimation
  • sphere2: scaleAnimation + rotateAround

The problem with using “rotateAround” is that it is cumulative, we cannot control and predict where it will end up.

relativePosition.y = 0; solves the problem partially

Using “absolutePosition” with “computeWorldMatrix” has the same result using “position”

Screenshot from 2023-12-05 18-44-17
Screenshot from 2023-12-05 18-44-17686×629 31.7 KB

9

I finally did it! It needs some tweaking, but that’s basically it.

I was a little worried about making an animation with a lot of keys, but it works well.
What a great end to the year! :rofl:

Happy New Year! :tada: God bless you all :pray: who helped me and others in this amazing babylonjs community!

2 Likes