renderer.setSize behavior on init() and following resize aren't consistent?

Questions
1

I have two scenes on a single page that I originally initialized with renderer.setSize(elem.clientWidth, elem.clientHeight) but found the canvas would not resize properly on a window resize event that called the same renderer.setSize as above. The renderer object indicated the the canvas size was correct, but on inspecting the canvas I found competing width and height settings; one set in the inline style declaration and also height and width tags in the markup.

On removing renderer.setSize in the init function, this behavior went away and the scene resized as expected. Is this behavior by design?

2

Please demonstrate the issue with a live example: Edit fiddle - JSFiddle - Code Playground

3

Hopefully I did it right; my first fiddle…

4

In your init() function your call resize like so:

s.renderer.setSize( width, height );

and in the resize event listener like so:

renderer.setSize(width, height, false);

Why the difference?

Besides, keep in mind that using more than one renderer is not recommended. You can use a single renderer even when having more than one canvas in your DOM.

Example: three.js webgl - multiple canvases - grid

5

Good question.

I tried using a single renderer as described in the supplied link but couldn’t figure out how to get clipping planes to work in the two scenes.