switching canvas / rendertarget in three.js
javascript, three.js, webgl
Solution
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.
Problem
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.