I wrote already how to combine three.js and Kinetic.js in the previous blog post. Since then, both libraries have evolved and the same code won’t work anymore so here is the update.

First, KineticJS is now initialized slightly differently. Instead of passing arguments, you pass a config object. The following code will construct a new KineticJS.Stage object:

stage = new Kinetic.Stage({
    container: "container",
    width: 700,
    height: 700
});

Three.js requires an HTML5 canvas element, not KineticJS wrapper around it. The correct way to initialize it is:

renderer = new THREE.CanvasRenderer({canvas: layer3D.getCanvas().getElement()});

Note: if you want to use WebGLRenderer instead of CanvasRenderer, the above code will not work. I will write a follow up post for that scenario soon.

You can see my new sample here.
Here is a jsfiddle version http://jsfiddle.net/hXw6D/3/.

This post may be invalid for you if you are using the latest versions of both libraries. Please read the updated blog post for more information: Combining three.js and KineticJS [updated]

If you are a web developer and you are seeking for an easier way to manage canvas rendering and interaction, I strongly recommend to you an excellent javascript library: KineticJS. With it you can create variety of shapes which can then be dragged around, receive mouse or touch events; in general, it gives you an object oriented access to the canvas elements. It is also very fast.

Since it is so similar to the classic desktop GUI development, you can use it to create GUI for your own apps that heavily rely on canvas rendering. I have already mentioned three.js (in previous post), an excellent library for rendering 3d graphics in your browser.

Let’s say that you want to render 3d scene and you wish to manipulate it in some way. You could design your interface using classic HTML controls, but if you are in full screen mode, it might be preferable to render them in custom way. It is only natural that you would want to combine these two libraries: one gives you 3d rendering for your visualization, the other gives you powerful 2d rendering. read more »