En HTML el desplazamiento de la página es manejado por el navegador basado en el contenido de la página. En Three.js y React Three Fiber, el Canvas está la mayor parte del tiempo fijo tomando toda la pantalla.

Esto significa que por defecto el desplazamiento de la página no tiene ningún efecto en la escena 3D.

Para remediar esto, necesitamos escuchar el evento de desplazamiento y actualizar nuestra escena 3D en consecuencia.

Eso es exactamente lo que ScrollControls de Drei hace a la perfección.

ScrollControls

<ScrollControls/> crea un contenedor de desplazamiento HTML frente al canvas. Su tamaño se basa en la prop de pages.

Una página equivale a la altura de la pantalla (100vh).

Envolvamos nuestra escena 3D en el <Canvas/> con <ScrollControls/>:

Copy
import { ScrollControls } from "@react-three/drei";

// ...

function App() {
  return (
    <>
      <Canvas camera={{ position: [0, 4, 12], fov: 30 }}>
        <ScrollControls pages={5}>
          <Experience />
        </ScrollControls>
      </Canvas>
    </>
  );
}

export default App;

Ahora tenemos un contenedor desplazable frente a nuestra escena 3D, pero aún no pasa nada cuando nos desplazamos.

Vamos a descubrir dos maneras de actualizar la escena basada en la posición del desplazamiento.

Componente Scroll

La primera manera de hacer que los elementos sigan el desplazamiento es usar el componente <Scroll/>.

Es un componente contenedor que actualiza la posición de sus hijos en función de la posición de desplazamiento.

Vamos a añadirlo para envolver nuestro mapa foodItems en Experience.jsx:

Copy
import { Scroll } from "@react-three/drei";
// ...

export const Experience = () => {
  return (
    <>
      {/* ... */}
      <Scroll>
        {foodItems.map((foodItem, idx) => (
          <FoodItem key={idx} {...foodItem} />
        ))}
      </Scroll>
    </>
  );
};

// ...

Ahora la posición de los food items se actualiza en función de la posición del scroll, pero queremos un elemento por página. (Empezando desde el segundo ya que el primero será una introducción)