如何用React-Three-Fiber实现蛇形滚动GLB模型动画？

我在为GLB模型添加动画时遇到了麻烦，对react-three-fiber不太熟悉，想要实现类似brainsave.ai网站上的背景蛇形轮播动画，参考动画如下：

我尝试用Math.sin函数实现类似效果，但无论怎么调整都达不到预期。定义了以下变量：

const [scrollOffset, setScrollOffset] = useState(0);
const numRectangles = 20;
const amplitude = 1; 
const frequency = 0.4; 
const spacing = 0.3; 
const speed = 0.005; 

并通过滚动函数设置偏移量：

const handleScroll = (event) => {
    setScrollOffset((prev) => prev + event.deltaY * speed);
};

在JSX返回部分，我循环生成矩形，通过x和y坐标设置位置：

return (
    <div className={styles.card} onWheel={handleScroll} style={{ height: '100vh', overflow: 'hidden' }}>
        <Canvas>
            <ambientLight intensity={0.5} />
            <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} intensity={1} />
            <pointLight position={[-10, -10, -10]} intensity={1} />

            {Array.from({ length: numRectangles }).map((_, index) => {
                // Positioning based on a sine wave pattern
                const x = -index * spacing;
                const y = amplitude * Math.sin(frequency * (x - scrollOffset));
                
                // Rotation based on the index, creating a gradual rotation
                const rotation = [4, -10, 0]; // Rotate slightly around the z-axis

                return <Model key={index} position={[x, y, 0]} rotation={rotation} />;
            })}
        </Canvas>
    </div>
);

我准备了一个Codesandbox项目，可以运行查看当前效果。

但当前动画不符合预期，无法实现想要的蛇形效果，希望能得到帮助。

Happy coding！

内容的提问来源于stack exchange，提问作者mrconcerned