How to create image slider with webgl textures in react three fiber

[noahtrotman]

I am currently trying to transition through an array of images using webgl shaders and react three fiber and I am stuck. Trying to use buttons to navigate through rather than just clicking on the canvas. Unsure how to pass / change imageOne and imageTwo with left and right arrow. Is this possible?

I'm aware how to do an image slider in react alone but confused with the two image properties for the glsl mix property. All help is appreciated.

Inspiration: https://yuta-takahashi.dev/

Sandbox: https://codesandbox.io/s/snowy-cdn-os34di?file=/pages/index.js

[mwmwmw]

Instead of using the images directly through destructuring, keep them in the image array and track the current image and the last image.

  const [currentIndex, setCurrentIndex] = useState(0); // index of the image you'll transition to
  const [lastIndex, setLastIndex] = useState(0); // index of the image you'll transition away from
  const images = useLoader(
    THREE.TextureLoader,
    imageData.map((v) => v.image)
  ); // all the images

Use the 'uProgress' value to do the transition effect.

  useFrame(() => {
    ref.current.uTime = clock.getElapsedTime(); // animates the waves
    ref.current.uProgress += (1 - ref.current.uProgress) * 0.1;  // animates the transition
  });

Then, each time you update the currentIndex, first, store the currentIndex value in lastIndex
Bind the keyboard events in a useEffect

useEffect(() => {
    function keydown(e) {
      let next = 0;
      switch (e.key) {
        case "ArrowLeft":
          next = currentIndex - 1;
          break;
        case "ArrowRight":
          next = currentIndex + 1;
          break;
        default:
          break;
      }
      setLastIndex(currentIndex);
      setCurrentIndex((images.length + next) % images.length);
    }
    window.addEventListener("keydown", keydown);

    return () => {
      window.removeEventListener("keydowm", keydown);
    };

  }, [currentIndex, lastIndex]);

Then have the component reference the two index values.

       <waveShaderMaterial
          uColor={"navy"}
          ref={ref}
          uTextureOne={images[currentIndex]}
          uTextureTwo={images[lastIndex]}
        />

To complete the transition, set uProgress to 0 when the currentIndex is updated.

  useEffect(() => {
    ref.current.uProgress = 0; // restart the transition
  }, [currentIndex]);

Full demo
https://codesandbox.io/s/intelligent-kowalevski-n1mmy1?file=/pages/index.js:2190-2742

[noahtrotman]

Ahh that makes some sense, I'll give it a go right now.
If you have a chance, would you be able to unlock your sandbox so I can compare my end result?

[mwmwmw]

Whoops! Unlocked.

[noahtrotman]

The keyboard definitely got me thinking of accessibility. However, I've been more trying to use the material design buttons onClick property in the Home component. Since the functions for the buttons would need to sit in the Wave component to update the indexes (ex. nextSlide and prevSlide functions), is it possible to pass the functions up two levels through the Scene for the onClick property of the buttons in the Home? Learning a lot as I go, so I hope this makes sense

[mwmwmw]

Oh, for some reason I interpreted "left and right arrow" to mean keyboard arrows. 😅

I shuffled a bunch of things around in the demo. Now you can click on the buttons (which I wrapped with a <button> tag)

I'll let you work out the styling.

https://codesandbox.io/s/intelligent-kowalevski-n1mmy1?file=/pages/index.js:2190-2742

The major change is that I created a parent component <WaveSlider> that handles all the interactivity, then passes that information into <Wave>. If you wanted to get super fancy, you could turn it into a hook, and use it in a context provider. Then the entire application would have access to it.

If you need specific accessibility features check out react-three-a11y

[noahtrotman]

Ah no worries! Your help has been a life saver and I'm very appreciative of it! This is a good foundation in which I'll work on the styling, look into react-three-ally for accessibility and the Wave hook. Thank you again, I hope you have an awesome day!