Reset camera position from outside scene

[maxwellhankner]

I'm wondering what is best way to set the camera position to some point from outside the scene. I have an interface as a separate react component and I don't know how to access the camera.position from there. I just want to click an html button and have the camera get set back to its original position or some specified coordinate.

Any help would be greatly appreciated!

[drcmda]

You're thinking bottom up, that's why it seems so complicated to you. React is fundamentally top down, there's state, then components react to it. Put the state that would define the camera position into your state model (zustand, valtio, or even just plain useState). Make the button set it, make a component within canvas listen and react to it.

[maxwellhankner]

I have not used zustand but I would prefer to stick with the build in state.. And this isn't making perfect sense yet. I'm trying to implement it. If I make a sandbox of what I have would you take a look?

[drcmda]

it would be the same

function App() {
  const [props, set] = useState({ position: [0,0,10], fov: 50 })
  return (
    <>
      <Canvas>
        <CameraRig {...props} />
        ...
     </Canvas>
     <button onClick={() => set({ position: ... })>click here to change cam

[maxwellhankner]

Ok thanks a lot. I'll give it a try in a bit.

[maxwellhankner]

This is what I ended up doing

`cameraReset,
setCameraReset,
}) => {
function CameraRig({ reset }) {
if (reset) {
const state = useThree();
state.camera.position.set(5.5, 1.5, 5.5);
setCameraReset(false);
}
return null;
}

return (
<Canvas
camera={{ fov: 45 }}
>
`

Can't imagine this is optimal but it's the only thing I could get to work. Works great. Only issue is with orbit controls damping. If the model is moving from damping and the camera is reset, there is a bit more damping after the camera is reset. What would be the fix for that?

[drcmda]

Yeah I think that breaks react. Hooks can't be conditional and there shouldn't be side effects in the render function, always use useEffect for that