How to attach the main camera to a <Box />

[sieeeebs]

This should be simple, I have a scene with a box with transform controls, orbit controls and an orthographic camera.

Currently when I move and rotate the cube I have to update the camera every time to focus on the box. How would I attach the camera to the box so the camera automatically repositions itself as the box moves?

The box is dynamically added to the scene, so it is not initially there at the start

  <Canvas
                            orthographic
                            camera={{ zoom: 50, position: [0, 0, 100] }}
                        >
                     
                            {selectedMesh ? (
                                <Cube
                                    position={selectedMesh.position}
                                    scale={selectedMesh.scale}
                                    rotation={selectedMesh.rotation}
                                    color={selectedMesh.color}
                                />
                            ) : null}
....
 </Canvas>

[drcmda]

the default camera isn't meant for that kind of thing and although you can theoretically parent it, i wouldn't do it. way easier to use an abstraction. drei's cameras are simple wraps around THREE.PerspectiveCamera, OrthographicCamera, CubeCamera and so on. they inherit all props: position, fov, near, far, etc, they are auto-responsive (you dont have to calculate aspect and resize them) and they can be parented easily.

import { PerspectiveCamera } from '@react-three/drei'

...

<Cube>
  <PerspectiveCamera makeDefault />
</Cube>