Dalam HTML, guliran halaman ditangani oleh browser berdasarkan konten halaman. Dalam Three.js dan React Three Fiber, Canvas sebagian besar waktu tetap mengambil seluruh layar.

Yang berarti bahwa secara default guliran pada halaman tidak memiliki efek pada scene 3D.

Untuk mengatasi hal ini, kita perlu mendengarkan event scroll dan memperbarui scene 3D kita sesuai.

Itulah yang benar-benar dilakukan oleh ScrollControls dari Drei.

ScrollControls

<ScrollControls/> menciptakan sebuah kontainer scroll HTML di depan canvas. Ukurannya didasarkan pada prop pages.

Satu halaman sama dengan tinggi layar (100vh).

Mari kita bungkus scene 3D kita dalam <Canvas/> dengan <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;

Sekarang kita memiliki kontainer yang dapat digulir di depan scene 3D kita, masih belum ada yang terjadi ketika kita menggulir.

Mari kita temukan dua cara untuk memperbarui scene berdasarkan posisi gulir.

Komponen Scroll

Cara pertama untuk memiliki elemen mengikuti scroll adalah dengan menggunakan komponen <Scroll/>.

Ini adalah komponen pembungkus yang akan memperbarui posisi anak-anaknya berdasarkan posisi scroll.

Mari tambahkan untuk membungkus peta foodItems kita di Experience.jsx:

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

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

// ...

Sekarang posisi dari food items tersebut diperbarui berdasarkan posisi scroll, tetapi kita ingin satu item per halaman. (Dimulai dari item kedua karena yang pertama akan menjadi pengantar)