Purpose of camera makeDefault

[sieeeebs]

I'm switching to r3f from regular three, just wondering what the camera makeDefault purpose is or what it is doing under the hood as I didn't need to use this in regular three.

I ask because I'm switching between cameras in viewports and find the extra step to have to set the default camera everytime pretty extra, but perhaps I'm doing something wrong?

[drcmda]

this is not r3f but drei, it just abstracts a declarative perspectivecamera. makeDefault is a prop of that component, it simply switches the system default camera. you can just use regular <perspectiveCamera ... /> in any way you want otherwise, it does not have makeDefault, you will be responsible for wiring it up, just like in threejs.

dreis cameras make switching a little easier than in plain three thats all, but its not required. for instance switching between two cams is done like this:

<PerpectiveCamera makeDefault={condition === 'perspective'} />
<OrthographicCamera makeDefault={condition !== 'perspective'} />

the advantage is that it's fully declarative and state driven, other parts of the app do not have to know about it. everything else is done for you, for instance raycasting (pointerevents) will just work ootb.

[sieeeebs]

I am confused as to what exactly useThree().setDefaultCamera does? What is the equivalent in three.js ? Regardless of using drei or r3f don't I have to use setDefaultCamera if I am using multiple cameras in my scene?

[gsimone]

Out of the box, r3f takes care of rendering, by using a "default" camera. By calling setDefaultCamera(yourCamera), you are telling r3f to instead use your camera when rendering. If you render manually, you can ignore this 👍

[sieeeebs]

Ah I see, so it's just an added boilerplate. Any chance you could provide an example of rendering manually?

[drcmda]

the default camera stuff is meant to remove boilerplate.

Any chance you could provide an example of rendering manually?

function IfImPartOfTheSceneIWillTakeOverRendering() {
  return useFrame((state) => {
    state.gl.render(state.scene, yourCamera)
  }, 1)
}

function AndIfImPartOfTheSceneIWillRenderOnTopBecauseMyIndexIsHigher() {
  return useFrame((state) => {
    state.gl.render(state.scene, yourCamera)
  }, 2)
}

useframe without index will just allow the component to participate in the frame loop. give it an index and r3f will stop rendering, it'll be your responsibility. the index allows you to orchestrate these, even if they're component in deeply nested places.