A basic 3D rendering engine for MooTools
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Moo3D and Moo3DFx - MooTools classes that help render basic 3D with JavaScript and an Fx based class to go with it

How to use

Create a new scene:

var scene = new Moo3D();

You can also pass in some options:

to tilt the scene

rotationAxis: {x: 0, y: 0, z: 0}

position the camera

camera: {x: 0, y: 0, z: 0, focalLength: 0}

offset points in 2D

origins: {x: 0, y: 0}

Add points:

var points = [];

//Add all images as points
$$('img').each(function(image, i)
    var image_width = image.width,
        image_height = image.height;

        //the element to apply the transformation to
        element: image,
        //3D coordinates
        x: 0 - image_width / 2,
        y: 0 - 50,
        z: i * distance,
        //can be a simple string or a function
            'left': function(){return this.projection.x + scene.options.origins.x;},
            'top': function(){return this.projection.y + scene.options.origins.y;},
            'width': function(){return this.projection.scale * image_width},
            'height': function(){return this.projection.scale * image_height},
            'opacity': function(){return this.projection.scale.limit(0, 1);},
            'z-index': function(){return Math.round(this.projection.scale * 100);}

//Add points to scene

Your modifiers can make use of the following projection properties through this.projection:

this.projection = {x, y, depth, scale}

Update the scene

Render the whole scene:


You can also only render certain points:


Using effects

A simple effect:

var myEffect = new Moo3DFx(myPoint, scene, {});
myEffect.start({x: 10, y: 50});


On top of options inherited from Fx, you also have renderPoints, if true (default), will only render the scene on the passed in points

You can essentially use Moo3DFx on any object with {x, y, z} properties, for instance:

var sceneFx = new Moo3DFx(scene.options.rotationAxis, scene,
    duration: 1200,
    transition: Fx.Transitions.Elastic.easeOut,
    wait: true,
    //since it's not a real point, we want to render everything
    renderPoints: false

Please look at the examples in the Examples folder to get a better idea:

  • Moo3D: move your mouse around to see the changes
  • Moo3DFx: click anywhere to make the carousel rotate
  • Seeders: a game interface concept, use bottom right corner pad

All the Examples' code contains comments to explain usage of the two classes Moo3D() and Moo3DFx()