Mesh.rotate animations with registerBeforeRender

https://playground.babylonjs.com/#2IAGJA#4

I’m not really going anywhere with this scene - I’m just playing around, practicing using functions more to create objects vs doing everything implicitly. Then I got stuck and realized I’m missing some key understanding of the render loop and/or rotation, so I’d like to figure out why.

I have this imported spaceship mesh and radio buttons that should be making the ship rotate along roll(z), yaw(y), and pitch(x), respectively. I’m just using registerBeforeRender to create the animated rotation. I haven’t tried the Animation class yet. Since I can’t figure it out this way, I want to know why exactly.

When you click one radio button, it works. But then when you click one of the others, the other rotation won’t stop. It just keeps adding the rotation on in all directions, going faster and faster with each click. Eventually I guess I was going to change the radio buttons to checkboxes, and have all possible combinations. But I need to know how to stop the rotation along unselected axes.

Basically I was trying to reset the rotation on unselected axes back to zero ( the original value). It didn’t make a difference.

Honestly I changed my code so many times I can’t keep track of everything I tried.

here are a couple of attempts

https://playground.babylonjs.com/#2IAGJA#3
https://playground.babylonjs.com/#2IAGJA#5

tried rotateAround
https://playground.babylonjs.com/#2IAGJA#6

then realized I"m missing something fundamental here.

You register a new “before render” observable each time you click on a button, so they add up. You should create a single onBeforeRender observable instead:

https://playground.babylonjs.com/#2IAGJA#8

1 Like

thanks. Here is a version with checkboxes, and toggles for all 3 axes.

https://playground.babylonjs.com/#2IAGJA#12

Combining more than one doesn’t seem to make it turn the way I would imagine it should. Perhaps quaternions would help (Anything I dont understand can be blamed on quaternions…)

but thats a whole new story…hashtag solved.

3 Likes