smooth horizontal scroll - REACT THREE FIBER

Question

I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :

(here is the codesandbox corresponding :https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js)

first and foremost I want a smooth scroll and can't seem to be able to make it, I used the lerp function to make it but the result doesn't work very well :

let scroll = 0;
  scroll = (scroll - scrollTargetMapped) * 0.03;

  // any other frame, groupRef.current is undefined, don't really know why
  // but because of it, i must put my logic inside an if loop 
  if (groupRef.current) {
    groupRef.current.position.x = THREE.MathUtils.lerp(
      scroll,
      -scrollTarget,
      0.01
    );
  }

secondly, the elements on my scene are placed kind of in a random way and the scene is not at all responsive. I would love to mimic the html logic and put my first element like 50px away from the left side of the screen but not sure if it's really possible with react threejs :)

If someone has any answer to one of those question, I take it 🙂

Thanks in advance !

Alexandre PUJOL · Accepted Answer · 2022-02-22 15:35:29Z

1

For those interested, I managed to find a solution, using one of drei components : ScrollControl, it works perfectly !

https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js

For more info on the said component, check out the doc : https://docs.pmnd.rs/drei/controls/scroll-controls

answered Feb 22, 2022 at 15:35

Alexandre PUJOL

1602 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

smooth horizontal scroll - REACT THREE FIBER

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related