DepthJS

The Basics

First off, this engine is for the CreateJs (and more specifically the EaselJS module) code package by Grant Skinner. If you don't already know the basics of using CreateJS then start there first.

Setting Up the Stage3D

Setting up a DepthJS scene involves putting a Stage3D inside of a normal CreateJS Stage. Then rendering of 3D objects within that Stage3D can begin.

var stg = new createjs.Stage('mycanvas');
var stg3D = new depthjs.Stage3D();
stg.addChild(stg3D);

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', function(){
	stg.update();
});

The above is all that's needed to set up a scene with DepthJS. Now you're ready to add stuff to the scene and start moving it around. And of them only lines 2 and 3 are different from how you normally set up a CreateJS stage.

Adding Basic 3D Elements

The Shape3D class is a simple way to get a graphics based shape on stage...but with 3D properties.

var rect = new depthjs.Shape3D();
rect.graphics.beginFill('#46B554').drawRect(-40,-30,80,60);
stg3D.addChild(rect);

rect.z = -40;
rect.rotY = 20;
rect.rotX = 60;

The Container3D contains normal 2D CreateJS objects and moves around in 3D.

var c3D = new depthjs.Container3D();

var bitmap = new createjs.Bitmap("imagePath.jpg");

c3D.addChild(bitmap);
stg3D.addChild(c3D);

c3D.z = -40;
c3D.rotY = 20;
c3D.rotX = 60;

Using Group3D

You can contain 3D objects for forward kinematics using the Group3D class. You can also use the use_namespace function to not have to deal with namespaces any more.

var a = new depthjs.Shape3D();
a.graphics.beginFill('#46B554').drawRect(-40,-30,80,60);
a.x = -80;

var b = new depthjs.Shape3D();
b.graphics.beginFill('#333333').drawRect(-40,-30,80,60);
b.x = 80;

var group = new depthjs.Group3D();
group.addChild(a, b);

stg3D.addChild(group);

group.rotX = 40;

use_namespace

DepthJS includes a neat function for shorthanding your namespaces if there's not going to be any conflicts of class names in your project. This makes using CreateJS and DepthJS together even more seamless. Using it would look like this:

use_namespace('createjs.*');
use_namespace('depthjs.*');

var stg = new Stage('mycanvas');
var stg3D = new Stage3D();
stg.addChild(stg3D);

var cont3D = new Container3D();
var bitmap = new Bitmap("imagePath.jpg");
cont3D.addChild(bitmap);
stg3D.addChild(cont3D);

Ticker.setFPS(30);
Ticker.addEventListener('tick', function(){
	cont3D.rotY += 1.5;
	cont3D.rotX += 2;
	stg.update();
});

});