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.
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.
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.
is it possible to use a transparent background with these separate components in react three? I’m just trying to have separate models on a single page with different sections designed and with text, much like the OP i think.