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.
But KineticJS uses its own canvas elements for layering and optimization; and three.js likes to create its own, what can we do? Luckily, as I have shown in the previous post, you give an existing canvas element to three.js and it will render into it.
We will basically create a new Kinetic stage, add special layer for three.js and another for GUI elements:
stage = new Kinetic.Stage("container", 700, 700);
layer3D = new Kinetic.Layer();
Now we can simply add its canvas to the CanvasRenderer constructor:
renderer = new THREE.CanvasRenderer({canvas: layer3D.getCanvas()});
We also need to modify the render function in order to render both 3d scene and GUI layer:
renderer.render(scene, camera); layerGUI.draw();
No we have both libraries working together in harmony.
Click here to open this example.
Last updated by at .
