For this first topic, let's discuss how to simply animate a box with code and how to create an animation using the Babylon.js tools such as the BABYLON.Animation
class. You'll quickly understand the importance of using the provided tools instead of handling animations with code.
Let's start with the following scene (a plane and a box):
Let's animate the box to turn around its center (x = 0, y = 0, and z = 0). The process should be to increment a value (angle) in time and set the new position of the box.
Typically, (x = Radius*Cos(angle), y = 0, and z = Radius*Sin(angle)).
To perform this action, you can call a .registerBeforeRender
function on the scene. This function takes an anonymous function as the parameter and this anonymous function will be automatically called for every frame, as follows:
var angle = 0.0; var radius = 10.0; scene.registerBeforeRender(() => { angle += 0.01; // Increment the angle ...