HTML में, पृष्ठ स्क्रॉल को पृष्ठ की सामग्री के आधार पर ब्राउज़र द्वारा संभाला जाता है। Three.js और React Three Fiber में, Canvas अधिकांश समय स्थिर होता है और पूरी स्क्रीन को ले लेता है।

इसका अर्थ है कि डिफ़ॉल्ट रूप से पृष्ठ का स्क्रॉल 3D दृश्य पर कोई प्रभाव नहीं डालता।

इसका समाधान करने के लिए, हमें स्क्रॉल इवेंट को सुनना और अपनी 3D दृश्य को उसी के अनुसार अपडेट करना होगा।

यही काम ScrollControls Drei से बेहतरीन तरीके से करता है।

ScrollControls

<ScrollControls/> कैनवास के सामने एक HTML स्क्रॉल कंटेनर बनाता है। इसका आकार pages प्रॉप पर आधारित होता है।

एक पृष्ठ स्क्रीन की ऊँचाई के बराबर है (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 component

पहला तरीका जिससे स्क्रॉल के साथ तत्व चलते हैं, उसे <Scroll/> component का उपयोग करके किया जा सकता है।

यह एक wrapper component है जो scroll position के आधार पर अपने बच्चों की position को update करेगा।

चलिए इसे foodItems मैप को Experience.jsx में wrap करने के लिए जोड़ते हैं:

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

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

// ...

अब food items की position scroll position के आधार पर update हो रही है, लेकिन हम एक आइटम को एक पेज पर चाहते हैं। (दूसरे से शुरू होते हुए क्योंकि पहला एक परिचय होगा)