Combining three.js and KineticJS - 3D cube

Question

I am trying to add a 3D cube to Kinetic JS canvas to show the x,y,z rotation. I found this article http://www.tonicodes.net/blog/combining-three-js-and-kineticjs. I worked with version 3.8, When I tried to follow the example using the version 4 of Kinetic JS I got this error,

 Unable to get property 'appendChild' 

Any suggestions, to solve it or a better method to include 3D cube in the canvas.

complete project http://jsfiddle.net/user373721/hXw6D/1/

I found this perfect example http://html5example.net/entry/html5-canvas/html5-canvas-pre3d-rotating-cube, unfortunately it is based on pre3d.js and I have no clue how to integrate with Kinetic JS canvas.

Answer 1

So I have managed to fix my sample from the linked blog post, see the result here: http://tonicodes.net/sandbox/html5/kthree/index.htm.

Several things have changed from my last post.:

Kinetic initialization is done differently now:

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

Also, you should supply canvas element provided by HTML5, not the one Kinetic wraps around it:

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

I also fixed your jsFiddle: http://jsfiddle.net/hXw6D/3/, check it out. You forgot to add another div element with id container.