How to switch to a camera defined in a loaded glTF scene?

[fortinmike]

I'm trying to:

1. Switch the active camera to one that's defined in a gltf (glb) file after that file loads
2. Start a (baked) animation that was setup to move that camera around

I didn't find a way to do this in the documentation, nor in Github issues and discussions. I tried using a primitive and the makeDefault tip from #709 but this does not seem to work. Maybe I'm just doing it wrong because I'm quite new to react-three-fiber (as well as three.js), or there is another way, but here's what I have so far:

const Scene = ({ ...rest }) => {
  const gltf = useLoader(GLTFLoader, sceneUrl);
  return (
    <>
      <ambientLight intensity={0.5} />
      <primitive object={gltf.scene} />
      <primitive object={gltf.cameras[0]} makeDefault />
    </>
  );
};

My scene displays just fine and I can see my camera in gltf.cameras as well as the corresponding camera animation in gltf.animations. I'm just not sure how to approach switching to the gltf-defined camera.

Any tips on the cleanest way to control gltf animations in the context of r3f (such as to start my camera animation, say, as soon as the scene is displayed) would also be appreciated :)

Thanks!

[fortinmike]

Okay, so I figured it out from the following snippet #181 (comment) and the useThree documentation. Maybe this should be documented in the GLTF section of the documentation?

My solution to switch to the gltf camera is this:

useEffect(() => set({ camera: gltf.cameras[0] }), [gltf.cameras, set]);

Now to get the camera animation playing!

[fortinmike]

Found a way to play the animation. Leaving this here:

const mixer = useMemo(() => new THREE.AnimationMixer(gltf.scene), [gltf.scene]);
const clock = useMemo(() => new THREE.Clock(), []);
useFrame(() => mixer.update(clock.getDelta()));

useEffect(() => {
  // Use the camera that's defined in the glTF
  set({ camera: gltf.cameras[0] });

  // Start an animation immediately (play it only once)
  const action = mixer.clipAction(gltf.animations[0]);
  action.setLoop(THREE.LoopOnce);
  action.clampWhenFinished = true;
  action.play();
}, [gltf.animations, gltf.cameras, gltf.scene, mixer, set]);

I don't know if this can be implemented more succinctly. Any feedback is appreciated!

[ashleymvanduzer]

You should use gltfjsx: https://github.com/pmndrs/gltfjsx :)

[drcmda]

right, all this goes away. gltfjsx exports the camera, you set it to makeDefault, run your animation (which it also sets up for you) and that is that.

example: https://twitter.com/0xca0a/status/1334639941708623873

[fortinmike]

I'd really like to (and I did know about it) but our scene is a GLB file because it needs to live on our CMS (and is updated often). So I can't generate new JSX every time the scene file is changed and reconnect my components to the appropriate state manually.

Knowing this, is there a better way to it?

[Ferenc1886Git]

To level up the stake: I have 5 animated cameras, which I want to switch with a timer. I followed @drcmda advice, I use gltfjsx, and I change the cameras with setState, but it allows me only change between two cameras. So do you have an idea how to change between 5 cameras?