Rendering multiple scenes on same canvas

I want to render multiple scenes on the same canvas. The idea is that said canvas will span the entire webpage, and the meshes I’m uploading will be contained within scenes defined by HTML elements on various locations of the webpage.

I don’t understand how to assign scenes to said HTML elements, however. It’s not just setting the dimensions, but also the location that’s important. The alternative is using multiple renderers and multiple canvases, which is obviously more inefficient.

So how do I go about this?

You can use the renderers scissor test.
I have an example here: Anistropic Filtering - Three.js Tutorials (sbcode.net)

See lines 148 - 161. Left and right of canvas render different scenes.

Read more about scissors here : WebGLRenderer#setScissor – three.js docs (threejs.org)

Also, if you want to render multiple scenes at the same time, there is no problem with using different canvases.
Example : Scene, Camera and Renderer - Three.js Tutorials (sbcode.net)

1 Like

use react + three and this is all done for you: View tracking - CodeSandbox

otherwise, yes, scissor, but it will be much more than that. pointer events, both html and gl receiving events to begin with, running controls, views having their own environments, etc, none of this is trivial.

i would also suggest you don’t use multiple canvases. it will be slow & memory inefficient, you can’t share data and syncing will become hard. in the end the browser can terminate your tab whenever it wants bc the amount of canvases you can have is limited to a small number.

1 Like

Many thanks for this. I am new to three.js, and as such did not know what route to take. react-three-fiber (and drei specifically) will be the backbone of my project, and I have made considerable progress thanks to you.