CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiber
Mike Manh
Mike Manh

Reputation: 343

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

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')
);

Upvotes: 3

Views: 5561

Answers (2)

Mike Manh
Mike Manh

Reputation: 343

Classically in gaming, to make cameras move like FPS cameras do and not lose "up" being up, you would put a camera inside of another 3D object and rotate around the Y axis in the exterior object and around the X axis of the camera object, to prevent gimbal weirdness. Doing this in react three fiber caused a weird bug that froze the camera. To solve this, instead of building a rig, you can change the rotation ORDER of the Euler that represents the rotation of the camera. To do so, just do this:

const { scene, gl, size, camera } = useThree();
camera.rotation.order = "YXZ";

Upvotes: 0

hpalu
hpalu

Reputation: 1435

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.

Upvotes: 2

Related Questions