Animating rotation of object around another object

Questions
#1

Hello,

I’ve got two cubes. One cube shall rotate around the other. Essentially I have the following code:

cube.rotateAround(
  cubeToRotateAround.position,
  Vector3.Up(),
  degreeToRadians(90),
)

How would I “translate” this into an animation? What happens if multiple cubes rotate at once? What are common pitfalls for this kind of thing?

Best regards

#2

This section should give you some ideas

Examples from this section

1 Like
#3

So I tried implementing this as best as I understood and this is the result: https://playground.babylonjs.com/#B6TPPB#10

I somehow failed in the logic / math part.

Any suggestions?

#4

Ahh a Rubik’s cube, depending on the axis of rotation and the changed position of the a single cube then the cube’s pivot or parent will need to change. Tricky.

Search the forum for Rubik and check out the various suggestions as other have had a go at building a Rubik’s cube.

1 Like
#5

Yea I found some but I don’t seem to understand how the rotation works in Basic Rubiks cube. I made some changes to my playground: https://playground.babylonjs.com/#B6TPPB#11

I simplified the example by using a 2x2x2 cube. Somehow it seems as if the parts of the rubiks cube are rotated an additional time. I don’t know what is causing this behaviour

#6

I could fix some issues:

  • using cube.setParent(transformNode) instead of cube.parent = transformNode to preserve transformations made on the cubes
  • correct the rotation calculation to use the current rotation of the transform node

Still there’re errors if you rotate vertically and horizontally :thinking:

#7

You can also try looking at how I handled the rotating on this demo using parenting. I tried to look and see where you were getting stuck but TBH that part got pretty harry to get right. But OTOH since I wrote the code in that one it should be relatively easy to answer questions about it if you have any. GL! :slight_smile: :beers: