Trong HTML, việc cuộn trang được trình duyệt xử lý dựa trên nội dung của trang. Trong Three.js và React Three Fiber, Canvas thường xuyên cố định và chiếm toàn bộ màn hình.

Điều này có nghĩa là theo mặc định, cuộn của trang không có tác động gì lên cảnh 3D.

Để khắc phục điều này, chúng ta cần nghe sự kiện cuộn và cập nhật cảnh 3D của chúng ta cho phù hợp.

Đó chính xác là điều mà ScrollControls từ Drei thực hiện hoàn hảo.

ScrollControls

<ScrollControls/> tạo một container cuộn HTML phía trước canvas. Kích thước của nó được xác định bởi thuộc tính pages.

Một trang tương đương với chiều cao của màn hình (100vh).

Hãy bọc cảnh 3D của chúng ta trong <Canvas/> với <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;

Bây giờ chúng ta có một container có thể cuộn phía trước cảnh 3D, hiện tại vẫn chưa có gì xảy ra khi chúng ta cuộn.

Hãy khám phá hai cách để cập nhật cảnh dựa trên vị trí cuộn.

Thành phần Scroll

Cách đầu tiên để các phần tử theo dõi cuộn trang là sử dụng thành phần <Scroll/>.

Đây là một thành phần bao bọc sẽ cập nhật vị trí của các phần tử con dựa trên vị trí cuộn trang.

Hãy thêm nó để bao bọc foodItems trong Experience.jsx:

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

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

// ...

Bây giờ vị trí của các mục thực phẩm được cập nhật dựa trên vị trí cuộn trang, nhưng chúng ta muốn mỗi mục một trang. (Bắt đầu từ mục thứ hai vì mục đầu tiên sẽ là phần mở đầu)