Scroll
HTML में, पृष्ठ स्क्रॉल को पृष्ठ की सामग्री के आधार पर ब्राउज़र द्वारा संभाला जाता है। Three.js और React Three Fiber में, Canvas अधिकांश समय स्थिर होता है और पूरी स्क्रीन को ले लेता है।
इसका अर्थ है कि डिफ़ॉल्ट रूप से पृष्ठ का स्क्रॉल 3D दृश्य पर कोई प्रभाव नहीं डालता।
इसका समाधान करने के लिए, हमें स्क्रॉल इवेंट को सुनना और अपनी 3D दृश्य को उसी के अनुसार अपडेट करना होगा।
यही काम ScrollControls Drei से बेहतरीन तरीके से करता है।
ScrollControls
<ScrollControls/>
कैनवास के सामने एक HTML स्क्रॉल कंटेनर बनाता है। इसका आकार pages प्रॉप पर आधारित होता है।
एक पृष्ठ स्क्रीन की ऊँचाई के बराबर है (100vh)।
आइए अपनी 3D सीन को <Canvas/>
में <ScrollControls/>
के साथ रैप करें:
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 करने के लिए जोड़ते हैं:
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 हो रही है, लेकिन हम एक आइटम को एक पेज पर चाहते हैं। (दूसरे से शुरू होते हुए क्योंकि पहला एक परिचय होगा)
React Three Fiber: The Ultimate Guide to 3D Web Development
✨ You have reached the end of the preview ✨
Go to the next level with Three.js and React Three Fiber!
Get full access to this lesson and the complete course when you enroll:
- 🔓 Full lesson videos with no limits
- 💻 Access to the final source code
- 🎓 Course progress tracking & completion
- 💬 Invite to our private Discord community
One-time payment. Lifetime updates included.