Adding multiple canvas to single webgl renderer

Questions
,
1

Hi, folks
Is it possible to place multiple child canvases and scenes within parent canvas having scene,camera, lights, webgl renderer, gltf model.?

Actually what exactly i want is, i have one canvas which consists of scene, camera, lights, webgl renderer and a gltf model, and i want to create four more child canvases on top of parent canvas and render gltf model objects whenever i click on model.

Currently im able to place objects randomly whenever i click on model using raycaster.

So my code looks like this:
main.js (5.5 KB)

Please help.

2

best method for “multiple independent scenes in one page” i’ve seen is to use one fixed full screen canvas and scissor test functionality to render in a div’s inner region

like these examples
https://threejs.org/examples/?q=multiple#webgl_multiple_elements
https://threejs.org/examples/?q=multiple#webgl_multiple_elements_text

1 Like
3

there’s also this one :wink:

4

it is possible. but splitting the view has deeper implications (rendering, events, controls, …). i’ve done it years ago in a larger application at work and it burned me out, it ended up getting more complex than these examples above.

if that’s an option you can pair three with react and it’s done, because there are components for that.

example 1 (views in a scroll container): View tracking - CodeSandbox

example 2 (split screen): View skissor - CodeSandbox

example 3 (heads up display): View skissor #2 - CodeSandbox

example 4 (rendering a view from different sides): https://twitter.com/edwinwebb/status/1550526342776569858

this is using drei/<View>.

1 Like