Nel HTML lo scroll della pagina è gestito dal browser in base al contenuto della pagina. In Three.js e React Three Fiber, il Canvas è per la maggior parte dei casi fisso occupando l'intero schermo.

Questo significa che di default lo scroll della pagina non ha effetto sulla scena 3D.

Per rimediare a ciò, dobbiamo ascoltare l'evento di scroll e aggiornare di conseguenza la nostra scena 3D.

È esattamente ciò che fa perfettamente ScrollControls di Drei.

ScrollControls

<ScrollControls/> crea un contenitore di scroll HTML davanti al canvas. La sua dimensione si basa sulla prop pages.

Una pagina equivale all'altezza dello schermo (100vh).

Avvolgiamo la nostra scena 3D nel <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;

Ora abbiamo un contenitore scrollabile davanti alla nostra scena 3D, ma quando scorriamo ancora non succede nulla.

Scopriamo due modi per aggiornare la scena in base alla posizione dello scroll.

Componente Scroll

Il primo modo per avere elementi che seguono lo scroll è usare il componente <Scroll/>.

È un componente wrapper che aggiornerà la posizione dei suoi figli in base alla posizione dello scroll.

Aggiungiamolo per racchiudere la nostra mappa foodItems in Experience.jsx:

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

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

// ...

Ora la posizione degli elementi cibo è aggiornata in base alla posizione dello scroll, ma vogliamo un elemento per pagina. (A partire dal secondo poiché il primo sarà un'introduzione)