कण आपके दृश्य में जीवन जोड़ने का एक शानदार तरीका हैं। इन्हें कई तरीकों से इस्तेमाल किया जा सकता है, जैसे कि बर्फ, बारिश, आग, धुआं, या जादुई प्रभाव। अक्सर इन्हें वातावरणीय प्रभाव बनाने के लिए उपयोग किया जाता है, जैसे कि धुंध, धूल, या चिंगारी।
इस पाठ में, हम Three.js और React Three Fiber का उपयोग करके कण बनाने के विभिन्न तरीकों की गहराई में जाएंगे और एक रात की बर्फबारी दृश्य बनाएंगे जिसमें तारों वाला आकाश और बर्फबारी का प्रभाव होगा:
देखें कैसे बर्फ के टुकड़े गिरते हैं और आकाश में तारे झिलमिलाते हैं। ❄️✨
तारे
हमारे प्रारम्भिक कोड में इस "लो पोली विंटर सीन" को EdwiixGG द्वारा बनाया गया है जो एक घन और एक एनिमेटेड प्रकाश स्रोत के ऊपर स्थित है।
यह अच्छा दिखता है लेकिन हम इसे और भी दिलचस्प बना सकते हैं आकाश में तारे जोड़कर।
चलिए आकाश में तारे जोड़कर शुरू करते हैं। React Three Fiber के साथ सबसे सरल तरीका है drei लाइब्रेरी से Stars component का उपयोग करना।
components/Experience.jsx में:
// ... import { Stars } from "@react-three/drei"; export const Experience = () => { // ... return ( <> <Stars /> {/* ... */} </> ); };
और voilà, हमारा आकाश अब सुंदर चमकते तारों से भरा हुआ है!
हम इसके पैरामीटर जैसे factor का उपयोग करके आकार को दूरी के आधार पर समायोजित कर सकते हैं या fade प्रभाव के समय को समायोजित करने के लिए speed का उपयोग कर सकते हैं।
सभी उपलब्ध पैरामीटर के लिए documentation देखें।
आइए देखें कि यह किस प्रकार काम करता है, Stars component के स्रोत कोड को ब्राउज़ करके।
हम देख सकते हैं कि तारों को प्रदर्शित करने के लिए वे points का उपयोग कर रहे हैं जिनमें ज्यामिति पर तीन गुण हैं:
position: प्रत्येक तारे की स्थिति निर्धारित करने के लिएcolors: प्रत्येक तारे का रंग निर्धारित करने के लिएsize: प्रत्येक तारे का आकार निर्धारित करने के लिए
फिर एक कस्टम ShaderMaterial जिसे StarfieldMaterial कहा जाता है, उन attributes values और time uniform के आधार पर बिंदुओं को सही ढंग से प्रदर्शित करने के लिए जिम्मेदार है।
सबसे पहले, यह दृष्टिकोण अद्वितीय है, यह हल्का है, और पूरी तरह से GPU पर प्रोसेस होता है जिसका मतलब है कि आप संभावित रूप से बहुत बड़ी संख्या में तारे लगा सकते हैं।
लेकिन दृष्टिगत रूप से मैं दो चीजें देखता हूं जिन्हें सुधारा जा सकता है:
- तारों को वर्ग के रूप में दर्शाया गया है।
- फीका किया हुआ प्रभाव सभी तारों के बीच समन्वयित है जिसके परिणामस्वरूप फ्लैशिंग प्रभाव होता है।
चूंकि हमारे पास Stars component के साथ उन पहलुओं पर नियंत्रण नहीं है, चलिए अपना खुद का स्टार सिस्टम बनाते हैं!
कस्टम तारे
तारों पर अधिक आसानी से नियंत्रण रखने के लिए, हम उनके लॉजिक को CPU पर इंस्टांसिंग का उपयोग करके हैंडल करेंगे।
चिंता न करें यदि यह सबसे अनुकूलित तरीका नहीं है, तारों की एक उचित संख्या के लिए यह ठीक है और अधिक लचीला होगा। हम सीखेंगे कि अपने कणों को GPU पर कैसे हैंडल करें जब हम अपना साधारण VFX इंजन बनाएंगे और TSL सिखेंगे इस अध्याय में आगे।
पीएस: इंस्टांसिंग अभी भी एक बड़ी संख्या में ऑब्जेक्ट्स को उसी ज्यामिति के साथ रेंडर करने का एक कुशल तरीका है जैसा कि अनुकूलन सबक में देखा गया है।
इंस्टांसेस
चलो एक नया फाइल components/StarrySky.jsx में अपना खुद का StarrySky कौम्पोनेंट बनाते हैं:
import { Instance, Instances } from "@react-three/drei"; import { useMemo, useRef } from "react"; import { randFloatSpread } from "three/src/math/MathUtils.js"; export const StarrySky = ({ nbParticles = 1000 }) => { const particles = useMemo( () => Array.from({ length: nbParticles }, (_, idx) => ({ position: [ randFloatSpread(20), randFloatSpread(20), randFloatSpread(20), ], })), [] ); return ( <Instances range={nbParticles} limit={nbParticles} frustumCulled={false}> <planeGeometry args={[1, 1]} /> <meshBasicMaterial /> {particles.map((props, i) => ( <Particle key={i} {...props} /> ))} </Instances> ); }; const Particle = ({ position }) => { const ref = useRef(); return <Instance ref={ref} position={position} />; };
हम एक InstancedMesh बना रहे हैं एक plane geometry का उपयोग करके और mesh basic material का संयोजन करके।
Drei से <Instance /> कौम्पोनेंट की मदद से, हम इस mesh के इंस्टांसेस बना सकते हैं और प्रत्येक कण (इंस्टेंस) को व्यक्तिगत रूप से नियंत्रित कर सकते हैं।
अब Stars कौम्पोनेंट को हमारे बनाई गई कस्टम components/Experience.jsx से हटा दें:
// ... import { StarrySky } from "./StarrySky"; export const Experience = () => { // ... return ( <> <StarrySky /> {/* ... */} </> ); };
अब हमारे पास यह अव्यवस्थित आकाश है:
यह एक अच्छी शुरुआत है!
चलो तारों के आकार को समायोजित करते हैं। useMemo में जो कणों की स्थिति सेट करने के लिए जिम्मेदार है, हम एक size गुणधर्म जोड़ सकते हैं:
import { randFloat, randFloatSpread } from "three/src/math/MathUtils.js"; // ... const particles = useMemo( () => Array.from({ length: nbParticles }, (_, idx) => ({ position: [randFloatSpread(20), randFloatSpread(20), randFloatSpread(20)], size: randFloat(0.1, 0.25), })), [] );
और Particle कौम्पोनेंट में, हम इस size गुणधर्म को Instance कौम्पोनेंट को पास कर सकते हैं:
const Particle = ({ position, size }) => { const ref = useRef(); return <Instance ref={ref} position={position} scale={size} />; };
अब यह बेहतर है, हमारे पास विभिन्न आकारों के तारे हैं:
लेकिन हमारे पास एक समस्या है, तारों को -20 से 20 के बीच randFloatSpread(20) का उपयोग करते हुए रखा गया है लेकिन हम चाहते हैं कि तारे आकाश में दूर स्थित हों।
इसे करने के लिए, हम z को हमेशा 0 पर रखते हैं और x स्थिति को 5 और 15 के बीच समायोजित करते हैं।
हमारे तारे x अक्ष पर 5 और 15 के बीच यादृच्छिक रूप से स्थित होंगे।
और केंद्र के चारों ओर सभी दिशाओं में फैलने के लिए हम y स्थिति को 0 और 2 * Math.PI के बीच घुमाते हैं।
केंद्र में कभी तारे नहीं होंगे और तारे सभी दिशाओं में फैल जाएंगे।
useMemo में जो कणों की स्थिति सेट करने के लिए जिम्मेदार है, हम position गुणधर्म को समायोजित कर सकते हैं और एक rotation गुणधर्म जोड़ सकते हैं:
const particles = useMemo( () => Array.from({ length: nbParticles }, (_, idx) => ({ position: [randFloat(5, 15), randFloatSpread(20), 0], rotation: [0, randFloat(0, Math.PI * 2), 0], size: randFloat(0.1, 0.25), })), [] );
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.
