0

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
  • 121
  • 8

1 Answers1

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

Alexandre PUJOL
  • 121
  • 8