ng-obelisk

Easily use Obelisk to create animations using Angular.js

ngObelisk

 

Obelisk is a very useful JavaScript library for creating isometric shapes. However, animations are difficult to achieve. That's where ngObelisk attempts to make things easier by utilising the Angular.js runtime loop to manage animations!

Heroku: http://ng-obelisk.wildhoney.io/

  • npm install;
  • bower install;
  • Navigate to localhost/ngObelisk/example;

You can follow the Obelisk "Getting Started" for adding objects onto your canvas, because ngObelisk doesn't alter how you interact with Obelisk.

However, you'll need to inject obelisk into your directive that you're using for your Obelisk doodles.

var object = pixelView.renderObject(cube, p3d);

ngObelisk returns the object to manipulate from the renderObject method – this is how the animations work in ngObelisk.

Therefore with object you can now invoke methods to animate your canvas – try object.setX(200) to change the dimension of your newly rendered cube.

var object = pixelView.renderObject(cube, p3d);
object.setX(200);

  • setX — set X dimension;
  • setY — set Y dimension;
  • setZ — set Z dimension;
  • setColour — set colour of the object;
  • setPosition — set position of the object;
  • remove — remove object from canvas;

Since Obelisk has a lot of references, ngObelisk comes bundled with a sanityCheck method to help you debug common problems.