What's the correct way to animate the camera using react-spring?

[neefrehman]

If I wanted to use react-spring to animate the camera position with OrbitControls how should I do this? I've been searching various issues but haven't seen any solutions yet.

Before I have managed to do this by directly accessing z.value like below, but it looks like this will no longer be possible with react-spring @ 9.0, having tested the beta.

import React, { useRef } from "react";
import { useFrame, useThree } from "react-three-fiber";
import { useSpring } from "react-spring";
import { OrbitControls } from "drei";

const Controls = ({ initialCameraZ }) => {
    const { gl, camera } = useThree();
    const ref = useRef();

    const { z } = useSpring({
        from: { z: initialCameraZ },
        z: 20,
    });

    useFrame(() => {
        camera.position.z = z.value;
        ref.current.update();
    });

    return (
        <orbitControls target={[0, 0, 0]} ref={ref} args={[camera, gl.domElement]} />
    );
};

[gsimone]

I gave it a shot https://codesandbox.io/s/r3f-basic-demo-nmm2s?file=/src/index.js
Solved using spring's onFrame, not sure if there's a better way

[neefrehman]

That's perfect, thanks! I adapted it a bit to work with properties on the camera object from useThree: https://codesandbox.io/s/r3f-basic-demo-f8zii?file=/src/index.js. This way even works without having to attach and update a ref.

One note, this doesn't work with the react-spring beta (or at least on ^9.0.0-rc.3). You can test by changing the package.json on the codesandbox. I've downgraded for now. @drcmda is this a bug and should an issue be opened? I can't find anything related in the changelog.

[VityaSchel]

Link seems to be broken

[alatella87]

we need that liink

[neefrehman]

@VityaSchel @alatella87 I've just fixed that link by pinning react-spring to v8. Please note that this technique no longer works with v9. I've just posted an answer that includes my current technique for doing this on newer versions: #505 (comment).

[alatella87]

Thank you very much! In the meantime if one doesn't want to use react-spring (i.e. for a simple camera animation on component being mounted) you can use state.camera.position.lerp with useFrame

const CameraAnimation = () => {
  const [started, setStarted] = useState(false)
  const vec = new THREE.Vector3();

  useEffect(() => {
    setStarted(true);
  });

  useFrame(state => {
    if (started) {
      state.camera.lookAt(0, 2, 0);
      state.camera.position.lerp(vec.set(6, 6, -4), .008)
    } return null
  })
   return null;
}

then add the component to the Canvas element..

<Canvas>
        <CameraAnimation />
</Canvas>

[drcmda]

i dont know, i find it unusual to have a usespring animate on its own.

generally i think this approach is problematic. controls control the camera, you cant animate the camera any longer. if you want to animate you must first disable controls. it seems to work in this case, but thats probably accidental. controls unfortunately do not allow programatic steering - which is a feature people have been asking for years but threejs doesnt want to.

[neefrehman]

ok interesting. by "animate on its own" do you mean without having a value destructured from the hook?

It seems like a dolly zoom would be a super common use-case. is there another way to achieve the same effect that i'm missing? I need something like a dolly + something like autoRotate from OrbitControls. (updated codesanbox here to show effect i have in mind)

[drcmda]

i think in v9 all the platform knowledge is inside the "a", so useSpring alone, can it animate without a view? ive never seen it before, so maybe it could ...

as for a dolly, that's super easy: https://codesandbox.io/s/r3f-particles-i-q4d2v?file=/src/index.js:4419-4636

but the problem is controls. orbitcontrols are from threejs, and they completely take over the camera, anything you do to the camera is instantly overwritten. and it only allows pointer interaction.

[neefrehman]

Ok, I'll look into using a for this. Regardless you're right orbitControls will be an issue. I'll look more into workarounds. its turning out to be surprisingly hard for (seemingly) simple camera behaviour!

Is this too much of an edge case to think about introducing a hook to react-spring that can work without a, where the value can be directly accessed like above? Something like useRawSpring as a named export (maybe behind the /three subdir)? This would obviously help with the camera challenge, but other use cases seem apparent for animating values in any of the objects returned from useThree, as I don't think you can currently do that with a. This would also be really helpful for three & React users who aren't using r3f, or p5 users. Happy to move the discussion to an issue in react-spring if you think it's worth talking about, or just ignore me if not.

[drcmda]

i asked them (threejs) why they're blocking access to programatic pan/rotate/zoom and the answer was this: mrdoob/three.js#9005 (comment) 😕 i must admit i have a hard time communicating with them, it seems like they're all mathematicians and they have no problem shifting quaternions around. someone like me, that has no idea whatsoever, is kinda left behind. if i wanted to move a camera AND have controls - well, tough luck.

[gsimone]

Why do you think it's problematic to just useSpring? I may be missing some react-spring fundamentals

[drcmda]

not problematic, but

1. you cant animate the camera if you have controls, because controls overwrite everything you do to it. it seems to work here but i think its either a race condition or accidental.

2. i am not sure if useSpring alone, without a view, without a.mesh/etc will animate. in v9 alec made drastic changes to react-spring, it could be the reason it's not animating any longer. i believe he's offering low level constructs now to get spring animation.

[dangrabcad]

Problem 1 is actually fine as long as you have something to ensure the controls and the animation aren't both active at once. In my case the system design works that way anyway, but I imagine that using the onStart and onRest callbacks to set and clear OrbitControls.enabled will also work.

There's one more detail to deal with. When the controls change the camera, the spring doesn't see that change, so when you start an animation, it'll jump to the last animation end-point. You need to tell it the up-to-date camera settings and set the reset option to use them:

let [cameraProps, setCameraProps] = useSpring(...);
setCameraProps({reset: true, from: {position: camera.position, ...}, position: endOfAnimation, ...});

[IbtsamAhmad]

Hi I want to use the gsap scrollTrigger to animate the position of my camera in react three fiber can someone help?

[ddpmarshall-ff]

I want to do the same thing ☝️

[neefrehman]

since v9 dropped, I've stopped trying to update the camera via a spring. Instead, what I've started doing is using a ZoomIn component that wraps a group, which I will move towards the camera with a spring. This should have the same effect, without the nightmare of updating three's camera state manually. Inside this component I'll put the elements that the camera should move towards, which is often the whole scene.

Below is the source code for the component, and here is an example codesandbox of the technique.

interface ZoomInProps {
  from: number
  to: number
  onRest?: () => void
  children: React.ReactNode
}

export const ZoomIn = ({ from, to, onRest, children }: ZoomInProps) => {
  const { position } = useSpring({
    position: [0, 0, -to],
    from: { position: [0, 0, -from] },
    onRest
  })

  return <animated.group position={(position as unknown) as Vector3}>{children}</animated.group>
}

[duranmla]

I found @neefrehman suggestion super useful, I animate the entire composition to make the illusion of the camera being animated. In my case I make the transition on click a element and then allow freely move the camera under my constrains. Nonetheless, it is important to highlight that:

• I am not able to achieve the same behaviour when I change the controls to something like <MapControls />
• The definition of <Controls /> to have args= camera and gl is vital for the functionality (idk why)

https://www.loom.com/share/6d3cdb346367475892b06a02acc059bb

import React, { forwardRef, Suspense, useRef, useState } from 'react'
import * as THREE from 'three'
import {
  Canvas,
  Color,
  MeshProps,
  ThreeEvent,
  useFrame,
  useThree,
} from '@react-three/fiber'
import { useTheme } from 'styled-components'
import { OrbitControls, QuadraticBezierLine, Stars, Text } from '@react-three/drei'
import { useSpring, animated } from '@react-spring/three'

// ...

export const PathwayScene = ({ pitstops, onClickPitstop }: PathwaySceneProps) => {
  const theme = useTheme()

  return (
    <Canvas>
      <Pathway3D pitstops={pitstops} onClickPitstop={onClickPitstop} theme={theme} />
      <ambientLight intensity={0.1} color="white" />
      <directionalLight position={[0, 5, 5]} />
      <Controls />
      <Stars />
    </Canvas>
  )
}

const Controls = () => {
  const { gl, camera } = useThree()
  return (
    /**
     * The args value with camera and gl are required to be passed to the OrbitControls
     * in order to allow the illusion of camera re-focus to work when click a pitstop.
     */
    <OrbitControls
      makeDefault
      target={[0, 0, 0]}
      args={[camera, gl.domElement]}
      maxDistance={10}
      minDistance={3}
      // vertical angle of the orbit
      minPolarAngle={angleToRadians(45)}
      maxPolarAngle={angleToRadians(80)}
      // horizontal angle of the orbit
      minAzimuthAngle={angleToRadians(-180)}
      maxAzimuthAngle={angleToRadians(180)}
    />
  )
}

const AnimatedGroup = ({ children }: { children: React.ReactNode }) => {
  const [focusPoint, setFocusPoint] = useState({
    from: [0, -3, -100],
    to: [0, 0, 0],
  })
  const { position } = useSpring({
    position: focusPoint.to,
    from: { position: focusPoint.from },
  })
  const newPosition = position as unknown as Vector3

  const handleOnClick = (e: ThreeEvent<MouseEvent>) => {
    const objectPosition = e.object.position.toArray()
    const newFocusPoint = {
      from: [focusPoint.to[0], focusPoint.to[1], focusPoint.to[2]],
      to: [objectPosition[0] * -1, objectPosition[1], objectPosition[2] * -1],
    }
    if (!e.object.userData.pitstopVariant) return

    setFocusPoint(newFocusPoint)
  }

  return (
    <animated.group position={newPosition} onClick={handleOnClick}>
      {children}
    </animated.group>
  )
}

const Pathway3D = ({
  pitstops,
  theme,
}: PathwaySceneProps & { theme: DefaultTheme }) => {
  const self = useRef<Partial<{ [key: string]: THREE.Mesh }>>({}).current
  const saveRef = (key: string) => (r: THREE.Mesh) => {
    self[key] = r
  }

  return (
    <Suspense fallback={null}>
      <AnimatedGroup>
        {/* render my whole composition */}
      </AnimatedGroup>
    </Suspense>
  )
}

const Connector = ({
  start,
  end,
  color,
  ...props
}: MeshProps & {
  start?: THREE.Mesh
  end?: THREE.Mesh
  color: string
}) => {
    // ...
}

const Pitstop = forwardRef(
  (
    { color, label, ...props }: MeshProps & { color?: Color; label?: string },
    ref: any
  ) => {
    // ...
)

[DaveSeidman]

I've had success using an <animated.group position={springAnimatedPosition}> and putting the camera inside of it.
Then if you want to animate the camera's rotation to point at objects, use another spring to tween the target and inside its onUpdate callback, do: cameraRef.lookAt(springAnimatedTarget.value)