Combining kinetic.js and three.js af kinetic.js v 5? - three.js

Question

Read the article:
http://architects.dzone.com/articles/combining-threejs-and
It seems however thay after kinetic.js v. 5-> this solution doesn't work anymore.
Has anyone been able to find a workaround?
Best regards and thank you
Jens

Answer 1

Three.js used canvas element
so used jquery to get the canvas used by kineti.js stage as shown in following code.
<script>
var camera, scene, renderer, geometry, material, mesh;
var stage, layer3D, layerGUI;
var animating = true;
function init() {
stage = new Kinetic.Stage({container: "container", width: 700, height: 700});
layer3D = new Kinetic.Layer();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 600 / 600, 1, 10000);
camera.position.z = 1000;
scene.add(camera);
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
stage.add(layer3D);
var canvas= layer3D.getCanvas();
canvas = $("#container canvas").get(0);
console.log( canvas );
console.log( layer3D );
renderer = new THREE.CanvasRenderer({ canvas: canvas });
renderer.setSize(700, 700);
var group = new Kinetic.Group({ draggable: true });
layerGUI = new Kinetic.Layer();
layerGUI.add(group);
stage.add(layerGUI);
render();
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame(animate);
render();
}
function render() {
if (animating) {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
}
renderer.render(scene, camera);
layerGUI.draw();
}
$(function () {
init();
animate();
});
</script>
Here canvas = $("#container canvas").get(0); is used to fetch the canvas of kinetic.js container.