How to use setState with react-three-fiber for multiple scenes?

[errant bane]

i'm trying build a single canvas with z-index -1, and two scenes like this https://threejs.org/manual/#en/multiple-scenes
but i can't override the css of the Canvas and Scene components.
so i tried using the following to set updateStyles to false because then i think i couldn't override the default styles, but if i do that then the page doesn't load and doesn't give an errors as to why.

useThree((state) => {
    // https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
    state.setSize(200, 200, false, 50, 50);
    ...
})

i'm afraid i'll have to switch to use vanillajs if i can't figure it out

[inner heron]

Look drei/View up, this is all taken care of

[inner heron]

https://codesandbox.io/s/view-tracking-bp6tmc

https://codesandbox.io/s/multiple-views-with-uniform-controls-r9w2ob

this is a single canvas, each view acts like a truly self contained canvas, you can have controls in there, environments, events, etc.

otherwise i do not understand what you are trying to do with updateStyles and setting setSize 120 times per second and why.

[errant bane]

i think i read about it somewhere so was trying that in desperation. and yes if useThree((state) => { is like the old componentDidUpdate() then that'd explain why it crashes

thanks very much for your help i'll try and see if i can get it to work again

[inner heron]

useThree just gives you fiber state

const camera = useThree(state => state.camera) re-renders the component if the camera changes
const viewport = useThree(state => state.viewport) re-renders the component when you resize