How to change camera position on scroll in react-three-fibre?

Questions
1

Hallo Friends,

can someone please let me how to animate the camera on scroll in react-three-fibre?

I searched for an example project and found this one

At the moment I am not sure if I understand the way we need make the camera move on page scroll. I think that as soon there is a scroll happening then we need to change the x,y,z achses in order to make the camera move, but how can I set the position for the camera when someone scrolls for example 50vh?

Thank you a lot for your help =)

2

there is a component in drei called scroll controls, all the thumbnails you see there are live, try them out: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

the sandbox you linked is more specific, that’s a camera keyframe animation that was made in blender, and it’s linked to scroll offset. scroll controls would make that box easier as well as it takes care of all the nasty css hacks that are needed in order for both canvas and the dom to receive events.

2 Likes
3

Thank you for your answer!

I already studied the react-three-drei scrollcontrolls component, but I got confused by the function Foo in the example:

function Foo(props) {
  const ref = useRef()
  const data = useScroll()
  useFrame(() => {
    // data.offset = current scroll position, between 0 and 1, dampened
    // data.delta = current delta, between 0 and 1, dampened

    // Will be 0 when the scrollbar is at the starting position,
    // then increase to 1 until 1 / 3 of the scroll distance is reached
    const a = data.range(0, 1 / 3)
    // Will start increasing when 1 / 3 of the scroll distance is reached,
    // and reach 1 when it reaches 2 / 3rds.
    const b = data.range(1 / 3, 1 / 3)
        // Same as above but with a margin of 0.1 on both ends
    const c = data.range(1 / 3, 1 / 3, 0.1)
    // Will move between 0-1-0 for the selected range
    const d = data.curve(1 / 3, 1 / 3)
    // Same as above, but with a margin of 0.1 on both ends
    const d = data.curve(1 / 3, 1 / 3, 0.1)
    // Returns true if the offset is in range and false if it isn't
    const e = data.visible(2 / 3, 1 / 3)
    // The visible function can also receive a margin
    const f = data.visible(2 / 3, 1 / 3, 0.1)
  })
  return <mesh ref={ref} {...props} />

What do I need to specify in the function Foo and what props I need to pass into function Foo?

4

that’s just a component named foo. you can name your component however you like :smiley: it shows a couple of raw usecases. start with the examples, it’ll become much clearer.

for instance

const scroll = useScroll()
useFrame((state, delta) => {
  // scroll.offset will be between 0 (start) and 1 (end)

with the range functions you can get 0 and 1 between ranges, say 0 starts at 1/4 and 1 at 3/4. but you might not need that at all, so just use the offset.

1 Like
5

Great thank you! I think thats exactly what I need. I will try it out asap =)