Camera ref undefined

[ahsan-ih]

• three version: 0.130.1
• @react-three/fiber version: 7.0.5
• @react-three/drei version: 7.2.1

Problem description:

The custom camera ref is not being set. I need that ref in some custom dom components outside Canvas tree

const camera = useRef()

return <>
  <CustomComponent camera={camera.current} />
  <Canvas>...</Canvas>
</>

Relevant code:

See console https://codesandbox.io/s/eager-elgamal-fj401. Is there something I am doing wrong.

[joshuaellis]

I think this is one of those old 'crossing react roots' issue, so if we encapsulate the components inside a Scene component everything works as expected, I would advise you to do the same – https://codesandbox.io/s/friendly-bhaskara-dk4lo?file=/src/App.js It's typically easier for all this stuff, because the Canvas component takes it's children and renders them in a different reconciler therefore a different react root, so things like refs and contexts don't cross over trees.

[ahsan-ih]

Can I access camera outside of canvas somehow? Basically its going to be used in some html buttons that are absolutely positioned over canvas like this

const camera = useRef()

return <div style={{ position: 'absolute' }}>
  <ButtonGroup camera={camera.current} />
  <Canvas>...</Canvas>
</div>

See the top left corner for button group

Is there any other approach I could use?

[joshuaellis]

You could share it using a state manager such as zustand. Although in this case I would probably use drei's Html component so the buttons can be closer to the code they're updating.

[drcmda]

this happens because r3f is in a separate react root which runs in a useLayoutEffect calling "render" which react executes async. by the time useEffect fires r3f lags a frame behind, or more, depending on concurrent mode and/or suspense.

i don't think there's a solution ...

or a problem ... because you should not lift the camera up, but rather distribute the raw state that's controlling the camera down. that's reacts guiding principle: one way data flow as opposed to two way data flow which is always troublesome. in other words, your state model/manager maintains something like { position: [0,0,0], fov: 50, ... }. and something else inside canvas is listening and reacting to it.

if you must access the camera then your code isn't wrong. eventually the ref will be filled, just not in useEffect. so either just leave it like it is and your buttons do: ref.current?.foo() or you could use useState and then you get notified:

const [cam, set] = useState()
useEffect(() => {
  if (cam) { ... }
}, [cam])
return (
  <Canvas>
    <PerspectiveCamera ref={set}>

[drcmda]

btw here's an example: https://codesandbox.io/s/shoe-configurator-qxjoj

when i made it i started out wrong, lifting state up and it was awkward and complex. then i started to work around these issues until i stopped and rethought the thing. eventually using a state manager which is a parent to both the dom and the canvas, and that worked out beautifully.