في HTML يتم التعامل مع تمرير الصفحة بواسطة المتصفح بناءً على محتوى الصفحة. في Three.js و React Three Fiber، يكون الـCanvas في معظم الأوقات ثابتاً ويشغل الشاشة بالكامل.

مما يعني أن التمرير في الصفحة ليس له أي تأثير على المشهد ثلاثي الأبعاد.

لعلاج ذلك، نحتاج إلى الاستماع إلى حدث التمرير و تحديث المشهد الثلاثي الأبعاد وفقاً لذلك.

هذا بالضبط ما تفعله ScrollControls من Drei بشكل مثالي.

ScrollControls

<ScrollControls/> تنشئ حاوية تمرير HTML أمام الـCanvas. حجمها يعتمد على خاصية الصفحات.

تساوي كل صفحة ارتفاع الشاشة (100vh).

لنقم بلف المشهد الثلاثي الأبعاد في <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;

لدينا الآن حاوية تمرير أمام المشهد الثلاثي الأبعاد، ولا يحدث شيء عند التمرير حتى الآن.

لنكتشف طريقتين لتحديث المشهد بناءً على موضع التمرير.

مكون Scroll

أول طريقة لجعل العناصر تتبع التمرير هي استخدام مكون <Scroll/>.

هو مكون غلاف يقوم بتحديث موضع العناصر التابعة له بناءً على موضع التمرير.

لنقم بإضافته لتغليف خريطة foodItems في Experience.jsx:

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

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

// ...

الآن يتم تحديث موضع عناصر الطعام بناءً على موضع التمرير، لكننا نريد عنصراً واحداً في كل صفحة. (يبدأ من الثاني حيث سيكون الأول مقدمة)