One scene, but multiple viewports with their own camera (three.js)

Question

I have a scene that I'd like to reuse, rendering the scene in two divs with a different camera angle for each div.

This link says a scene cannot be shared between multiple renderers, and suggests using multiple viewports with a single renderer. How can I assign multiple cameras to a renderer, and then get the DOM element that each is displayed in?

Thanks

Answer 1

You want to do it exactly as in this three.js example:

https://threejs.org/examples/webgl_multiple_views.html

This uses multiple viewports, not multiple divs. It really is the best way.

Answer 2

I'd like to update this answer for 2018, as this is one of the top Google hits when looking for user examples.

This was fixed in this commit. With several examples added.

Passing an existing scene to another renderer instance works as you would expect now.