Book Image

Babylon.js Essentials

By : Julien Moreau-Mathis
Book Image

Babylon.js Essentials

By: Julien Moreau-Mathis

Overview of this book

Are you familiar with HTML5? Do you want to build exciting games and Web applications? Then explore the exciting world of game and Web development with one of the best frameworks out there: Babylon.JS. Starting from the beginning, the book introduces the required basics for 3D development and the knowledge you need to use the Babylon.js framework. It focuses on the simplicity provided by Babylon.js and uses a combination of theory and practice. All the chapters are provided with example files ready to run; each example file provides the previously learned features of the framework. Finally, developers will be ready to easily understand new features added to the framework in the future.
Table of Contents (15 chapters)
Babylon.js Essentials
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Creating animations using Babylon.js


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.

Animating an object 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
...