CODEWITHSUNDEEP
javascriptwebglthree.js
Daniel Robinson
Daniel Robinson

Reputation: 14878

switching canvas / rendertarget in three.js

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.

Upvotes: 5

Views: 4079

Answers (2)

user3325025
user3325025

Reputation: 664

this post was really helpful to me

it looks like you do not have to create an extra canvas nor renderer, but rather an additional renderTarget with it's own scene and camera

Upvotes: 0

MikaelEmtinger
MikaelEmtinger

Reputation: 579

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.

Upvotes: 6

Related Questions