使用着色器进行三个JS滑块过渡?

我喜欢着色器,因为它能产生美丽的效果;我看到了很多像这样的滑块效果

https://codepen.io/dev_loop/pen/eYZqMwV

我尝试在下面的滑块中实现相同的逻辑动画,但无法弄清楚这是如何做到的,因为他是动画图像而不是3d模型,当用户左右滑动时,是否有任何方法可以使3d模型具有与上面的WEBGL滑块相同的效果?

我用useGesture制作了一个小滑块,通过onDrage事件左右移动幻灯片

import "./styles.css";
import { Canvas } from "@react-three/fiber";
import { useState } from "react";
import { useGesture } from "react-use-gesture";
import { Float, OrbitControls, Box, Ring, Stage } from "@react- 
three/drei";
export default function App() {
 const models = [
 { model: <Box /> },
{ model: <Ring innerRadius={0.5} outerRadius={1} /> },
{ model: <Box /> },
{ model: <Ring innerRadius={0.5} outerRadius={1} /> },
{ model: <Box /> },
{ model: <Ring innerRadius={0.5} outerRadius={1} /> }
  ];

const [modelIndex, setModelIndex] = useState(0);
const [isDragging, setIsDragging] = useState(false);
const [canChangeModel, setCanChangeModel] = useState(true);
const modelCount = models.length;
const bind = useGesture({
onDragStart: () => {
  setIsDragging(true);
},
onDragEnd: () => {
  setIsDragging(false);
  setCanChangeModel(true);
},
onDrag: ({ direction }) => {
  if (isDragging && canChangeModel) {
    const threshold = 0.5;

    if (direction[0] < -threshold) {
      setModelIndex((index) => (index + 1) % modelCount);
      setCanChangeModel(false);
    } else if (direction[0] > threshold) {
      setModelIndex((index) => (index - 1 + modelCount) % 
modelCount);
      setCanChangeModel(false);
    }
  }
}
});

return (
<div style={{ height: "100vh" }} {...bind()}>
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />

    <group>
      {models.map(
        (model, index) =>
          index === modelIndex && <group key={index}>{model.model}</group>
      )}
    </group>
  </Canvas>
</div>
);
}

是否可以在幻灯片之间获得上述效果转换并将其添加到下面的幻灯片中?