Procedural Animation, Using JavaScript to Animate 3D Objects, Using a Slider to Change the Speed

This tutorial looks at procedural animation. There are several ways to animate objects in a 3D scene. This tutorial looks at using JavaScript code to animate an object.

The 3D scene is exported from Blender using Blend4web, but the scene does not contain keyframes or any other animation data.

The tutorial follows on from a series looking at using sliders to control the properties of 3D objects. A slider is used to control the speed of the animation.

The JavaScript method ‘setInterval’ is used to call a function at regular time intervals (in the example, fifty times per second). Each time the function is called it adds a small amount to a 3D object's z location.

The 3D scene is rendered in a web browser at speeds of typically sixty frames per second. With the z location continuously changing the object appears to move.

The slider affects the size of the increment added to the z location, a large amount makes the object move faster.

The files used in the tutorial can be downloaded from my website -

Download blend4web from -

[wgalloPT]

Another incredible, powerfull and useful tutorial by Ian...

[vivaAlgérie]

go with speed x2 before u start the video