HTML5 Zone is brought to you in partnership with:

My name is Toni Petrina and I am a software developer and an occasional speaker. Although I primarily develop on the Microsoft stack, I like to learn new technologies. My hobbyist projects range from game development, regardless of the technology, to ALM. I spend most of my time with my girlfriend and someday I will learn how to play the guitar properly. Toni is a DZone MVB and is not an employee of DZone and has posted 69 posts at DZone. You can read more from them at their website. View Full User Profile

Combining three.js and KineticJS [update]

04.02.2013
| 2253 views |
  • submit to reddit

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/.




Published at DZone with permission of Toni Petrina, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)