Search code examples
three.jswebglkineticjslayerrenderer

Combine THREE.WebGLRenderer and Kinetic.js Layers

He Guys,

I'm trying to combine THREE.js and Kinetic.js in my web-application. I'm having problems doing this with the THREE.WebGLRenderer. How can I setup my view that I have a 3D-Layer that is rendered by the THREE.WebGLRenderer and a seperate Layer on top of that for 2D-Elements, like e.g. Labels etc., using Kinetic.js?

I've tried to give the WebGLRenderer the canvas element of an instance of a Kinetic.Layer Element. But it does not work.

this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true, canvas: this.layer3D.getCanvas()._canvas });

Until now I only found examples that do this with the THREE.CanvasRenderer.

Ideas somebody? Thanks a lot.

Solution

  • A canvas can have either a 2D context or a 3D context, not both as they are considered incompatible. When you pass the Canvas from kinetic layer, it already has a 2D context bound to it.

    However you can have another HTML element (ex, DIV) on top of the GL rendered canvas.