Change position of camera on scoll

[rain patio]

Pretty self-explanatory, ow do I change the position of the camera on scroll? (i.e. how do I write this raw three.js code:

    const moveCamera = () => {
      const top = document.body.getBoundingClientRect().top;
      camera.position.set(top * -0.0002, top * -0.002, top * -0.01);
    };

    document.body.onscroll = moveCamera;
    moveCamera();

in react-three?

[dense glade]

Explain better

[rain patio]

I really don't know how to. I just have a canvas with some model on it:

<Canvas>
  <Suspense fallback={null}>
    <MyScene />
  </Suspense>
</Canvas>

And, I want to change the position of the camera (like set the x,y and z to top * something) each time the user scrolls

[rain patio]

it's basically "i wanna port this code (raw three.js) to react-three"

[dense glade]

For scrolling you can use an event listener

[rain patio]

yeah, but what about changing the camera's position?

[dense glade]

Use a variable and add the coords in the variable from the event listener in moveCamera() you add + variable

[rain patio]

I just wana know how do I modify the camera's position? Is there a hook or a tag for that?

[dense glade]

Then call it in the function

[rain patio]

what

yeah but i don't have a camera variable

wait do you understand that I am writing react-three@fiber code and not raw three.js?

[rich eagle]

I think this is what you are looking for: https://github.com/pmndrs/drei#scrollcontrols

[rain patio]

Not trying to be rude, but if you read the message properly I clearly mention that I want to convert that code in react-three

[rain patio]

will look into it

ty

[rain patio]

Okay, so i looked through the docs, but it didn't help me with changing the camera's position on scroll

[rich eagle]

uhm, did you check the code samples?

[rain patio]

useFrame() hook works :)

[knotty hull]

Hello @rain patio
I can help you

[rain patio]

Thanks, but I already got it. I used useFrame():

  useFrame((state) => {
    const top = document.body.getBoundingClientRect().top;
    state.camera.position.set(top * -0.002, top * -0.002, top * -0.08);
  });

If you have a better approach, drop it in!

The current one is actually a little slow, there's a delay between the animation and the scroll