Dans HTML le défilement de la page est géré par le navigateur en fonction du contenu de la page. Dans Three.js et React Three Fiber, le Canvas est la plupart du temps fixe prenant toute la surface de l'écran.

Ce qui signifie que par défaut le défilement de la page n'a aucun effet sur la scène 3D.

Pour remédier à cela, nous devons écouter l'événement de défilement et mettre à jour notre scène 3D en conséquence.

C'est exactement ce que fait parfaitement ScrollControls de Drei.

ScrollControls

<ScrollControls/> crée un conteneur de défilement HTML devant le canvas. Sa taille est basée sur la propriété pages.

Une page égale la hauteur de l'écran (100vh).

Enveloppons notre scène 3D dans le <Canvas/> avec <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;

Nous avons maintenant un conteneur défilant devant notre scène 3D, rien ne se passe lorsque nous défilons pour l'instant.

Découvrons deux façons de mettre à jour la scène en fonction de la position de défilement.

Scroll component

La première façon d'avoir des éléments suivant le défilement est d'utiliser le composant <Scroll/>.

C'est un composant wrapper qui va mettre à jour la position de ses enfants en fonction de la position de défilement.

Ajoutons-le pour envelopper notre map foodItems dans Experience.jsx :

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

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

// ...

Maintenant, la position des éléments alimentaires est mise à jour en fonction de la position de défilement, mais nous voulons un élément par page. (À partir du deuxième car le premier sera une introduction)