No HTML a rolagem da página é controlada pelo navegador com base no conteúdo da página. No Three.js e no React Three Fiber, o Canvas é na maioria das vezes fixo ocupando a tela inteira.

Isso significa que, por padrão, a rolagem da página não tem nenhum efeito na cena 3D.

Para remediar isso, precisamos ouvir o evento de rolagem e atualizar nossa cena 3D de acordo.

Isso é exatamente o que o ScrollControls do Drei faz perfeitamente.

ScrollControls

<ScrollControls/> cria um container de rolagem HTML na frente do canvas. Seu tamanho é baseado na propriedade pages.

Uma página equivale à altura da tela (100vh).

Vamos envolver nossa cena 3D no <Canvas/> com <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;

Agora temos um container rolável na frente da nossa cena 3D, mas nada acontece quando rolamos ainda.

Vamos descobrir duas maneiras de atualizar a cena com base na posição da rolagem.

Componente Scroll

A primeira maneira de fazer elementos seguirem o scroll é usar o componente <Scroll/>.

É um componente wrapper que atualiza a posição de seus filhos com base na posição do scroll.

Vamos adicioná-lo para envolver nosso mapa foodItems em Experience.jsx:

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

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

// ...

Agora a posição dos itens de comida é atualizada com base na posição do scroll, mas queremos um item por página. (Começando pelo segundo, já que o primeiro será uma introdução)