switching canvas / rendertarget in three.js

Question

I have two canvas elements on my page and I start rendering to my:

new THREE.WebGLRenderer({canvas:myFirstCanvas});

and the 3D scene is properly rendered as I expect

but then if I try to change the canvas element the renderer is pointing to by using either:

renderer.domElement = mySecondCanvas;

or

renderer.setRenderTarget({canvas:mySecondCanvas});

I have looked on the documentation on github but setRenderTarget() says TODO unfortunately. Is it possible to switch the canvas element the renderer is using? and if so how would I go about this? currently my attempt does nothing but blur the image in the original canvas element presumably because I also resize the renderer with:

renderer.setSize(mySecondCanvas.width,mySecondCanvas.height);

when I'm trying to switch over to the other canvas.

Answer 1

Unfortunately, and this is due to hon WebGL work and has nothing to do with Three.js specifics, but each WebGL-context (in Three.js represented by the WebGL renderer) is bound to a canvas element and you cannot change which element the WebGL-context should render to.

So: make two THREE.WebGLRenderers, one for each canvas element.