HTMLでは、ページスクロールはページのコンテンツに基づいてブラウザによって処理されます。Three.jsおよびReact Three Fiberでは、Canvasがほとんどの時間で固定され、画面全体を占めます。

つまり、デフォルトではページのスクロールが3D シーンに影響を与えないということです。

これを解決するために、スクロールイベントを監視し、3D シーンを適宜更新する必要があります。

これこそがScrollControlsが完璧に処理することです。

ScrollControls

<ScrollControls/> は、canvas の前にHTML スクロールコンテナを作成します。そのサイズはpagesプロップに基づいています。

1ページは画面の高さ（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 シーンの前にスクロール可能なコンテナが作成されましたが、まだスクロールしても何も起こりません。

スクロール位置に基づいてシーンを更新する2つの方法を見てみましょう。

Scroll component

要素をスクロールに追随させる最初の方法は、<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>
    </>
  );
};

// ...

これでfood itemsの位置がスクロール位置に基づいて更新されますが、1ページあたり1つのアイテムを表示したいです。 (最初の1つはイントロダクションになります)