HTML에서는 페이지 내부의 콘텐츠에 따라 스크롤이 브라우저에 의해 처리됩니다. Three.js와 React Three Fiber에서는 Canvas가 대부분 고정되어 전체 화면을 차지합니다.

이는 기본적으로 페이지의 스크롤이 3D 장면에 아무런 영향을 미치지 않는다는 것을 의미합니다.

이를 해결하기 위해서는 스크롤 이벤트를 청취하고 우리의 3D 장면에 맞게 업데이트해야 합니다.

이것이 바로 Drei의 ScrollControls 가 완벽하게 수행하는 역할입니다.

ScrollControls

<ScrollControls/>는 캔버스 앞에 HTML 스크롤 컨테이너를 생성합니다. 그 크기는 pages prop에 기반합니다.

한 페이지는 화면의 높이(100vh)와 같습니다.

우리의 3D 장면을 <Canvas/>와 <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;

이제 3D 장면 앞에 스크롤 가능한 컨테이너가 있습니다. 아직 스크롤할 때 아무 일도 일어나지 않습니다.

스크롤 위치를 기반으로 장면을 업데이트하는 두 가지 방법을 알아보겠습니다.

스크롤 컴포넌트

스크롤을 따라 이동하는 요소를 만드는 첫 번째 방법은 <Scroll/> 컴포넌트를 사용하는 것입니다.

이 래퍼 컴포넌트는 스크롤 위치에 따라 자식 요소의 위치를 업데이트합니다.

이를 Experience.jsx에서 우리의 foodItems 맵을 감싸도록 추가해봅시다:

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

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

// ...

이제 음식 항목들의 위치는 스크롤 위치에 따라 업데이트되지만, 우리는 한 페이지에 한 항목씩 표시하고 싶습니다. (첫 번째는 소개로 사용되므로 두 번째부터 시작합니다)