How to nest a camera in a group in react three fiber

Question

I'm at a loss to do this in react-three-fiber. I want to create a rig for a camera (which is straightforward in three.js). I put the camera inside of a group. If I want to rotate the camera around the Y axis, i change the rotation of the parent group. If I want to rotate it around the X axis, I rotate the camera itself. This way, I don't deal with gimbal issues (like if y rotation is 180 degrees then x rotation is inverted).

in three.js i would do:

const cameraRig = new THREE.Group();
cameraRig.add(camera);
scene.add(cameraRig);

cameraRig.rotation.y = Math.PI;
camera.rotation.x = Math.PI/8;

But in react-three-fiber I don't know.

I have a camera I am using from useThree

const {camera} = useThree();

ReactDOM.render(
  <Canvas>
    <ambientLight />
    <group rotation={[0,Math.PI,0]}>
      <camera rotation={[Math.PI/8,0,0]}/>
    </group>
  </Canvas>,
  document.getElementById('root')
);

Answer 1

react-three-fiber brings its own camera, this one is a default and you wont be able to nest children in there. you can use your own cameras of course, the state model has a "setDefaultCamera" function for this, so that pointer events and everything else gets to use your new camera. cameras unfortunately arent straight forward in three, so there's still some churn involved as you need to update it on resize, you need to calculate aspect etc. all this has been abstracted here: https://github.com/pmndrs/drei#perspectivecamera-

<PerspectiveCamera makeDefault>
  <mesh />
</PerspectiveCamera>

that takes care of everything. now that camera is the system default, and it takes children.