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)
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
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/