Combining three.js and KineticJS

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 .

  • Yi-Fan Liao

    Thank you! I was wondering how i could integrate KineticJS into existing 3D WebGL game and saw your great post. Just 1 question, can I use WebGLRenderer instead of CanvasRenderer?

    • http://www.tonicodes.net/blog/ Toni Petrina

      Hi Yi-Fan,

      Unfortunately I haven’t tried that combination and I suspect that it doesn’t work judging from your question. I will take a deeper look at it and answer here again if I find anything.

    • Richard Joseph

      Yi-Fan,

      I haven’t tried this myself but it does seem possible to pass a canvas instance through to Three.js’s WebGLRenderer as described @ http://mrdoob.github.com/three.js/docs/49/#WebGLRenderer , so personally, I don’t see why not ;-)

      • http://www.tonicodes.net/blog/ Toni Petrina

        Hi Richard. It won’t work since KineticJS will try to get 2d context from canvas which prevents retrieving 3d context from the same canvas. I have a fork in which I’ve added support for mixing both webgl and kineticjs. You can find it on the github: https://github.com/tpetrina/KineticJS.

        • http://twitter.com/gautamadude Gautama Dude

          I tried the fork, but I’m getting “Uncaught TypeError: Object # has no method ‘scale’” so I’m thinking that perhaps the webgl context doesn’t support the scale method which is used by KineticJS, but I’m not sure since I’m on Ubuntu and Chromium doesn’t support the webgl context there, it only supports the experimental-webgl context, so perhaps the experimental context doesn’t support it, or both. If it is both, any ideas what could be done? Seems it would require some extensive rewriting of KineticJS, or minor rewriting, don’t know.

          • http://www.tonicodes.net/blog/ Toni Petrina

            Hi, some things may be broken. I could fix them if you could send me some minimal program that triggers the exception. Some rewrite is necessary for Kjs since it always counts on having 2d context.

            Please send me a repro script so I can fix it :)

  • Rong Zhou

    The code is cool, but when apply texture to mesh, the object keep dark. :( Any idea?

    • http://www.tonicodes.net/blog/ Toni Petrina

      You probably don’t have a proper material or a light source.