behave3d Engine

The behave3d library is loaded and automatically started by including the engine's script file:

This will create window.Behave3d which contains all the library's functionality.

Library Structure

Here's the basic structure of the library:

Loading of Controllers

The behave3d library contains many controllers (with more to come), each of them being defined in a separate file. Only the files of the controllers that will be used on a page need to be loaded, and they should be loaded after the library's engine file. Each controller file has a command in its end, registering the controller for use:
Behave3d.registerController("rotate", Behave3d.controllerRotate);

Some controllers use and are dependant on other controllers. In these cases the dependencies should be loaded before the dependant controller.


The behave3d library is mainly about animations, which require changes apllied at regular intervals (i.e. frames). The library has a main update method called on every frame with either window.requestAnimationFrame() or window.setTimeout(), depending on the value of Behave3d.consts.FRAME_TIMER_TYPE.

The engine keeps a pool of references to all HTML elements on the page that have behave3d functionality. Which means that these elements either have controllers, or other elements' controllers apply transformations on them. On each frame, every element in the pool has all its controllers updated. After all elements' controllers have been updated, each element has the collected transforms applied.

Applying of Transforms

Since changes to DOM and CSS properties are slow operations, the behave3d library doesn't let each controller apply 3D transforms by itself (by appending to style.transform). Instead, each instance of Behave3d.Element has a queue of requested transforms which is applied to the element all at once every frame. The engine rounds the values of all requested transforms and applies the new transforms only if different than the currently-applied transforms. The following options (shown with default values) set the rounding precision (in digits after decimal point) for the different transforms' parameters:
Behave3d.consts.PRECISION_TRANSLATE = 1;
Behave3d.consts.PRECISION_ROTATE = 3;
Behave3d.consts.PRECISION_ROTATE_ANGLE = 1;
Behave3d.consts.PRECISION_SCALE = 3;
Behave3d.consts.PRECISION_OPACITY = 2;

The controllers need only to supply the correct values every frame, and don't "think" about optimizations in applying.

Synchronized Viewport and Perspective

The behave3d library tries to achieve a "true" 3D scene where moving the camera causes the redrawing of all visible objects, so that they are "looked at" from the new position of the camera. Which, in HTML+CSS terms, means that the perspective properties of the elements should reflect the changes in the browser's viewport, so that perspective's vanishing point always matches the center of the viewport.

Have a look at controllerScene's Reference for more details.