आधुनिक वेब विकास में, क्लासिक और वेब अनुप्रयोगों के बीच की सीमाएँ हर दिन धुंधली होती जा रही हैं। आज हम न केवल इंटरैक्टिव वेबसाइटें बना सकते हैं, बल्कि सीधे ब्राउज़र में संपूर्ण गेम भी बना सकते हैं। इसे संभव बनाने वाले उपकरणों में से एक लाइब्रेरी है - तकनीक का उपयोग करके पर आधारित 3डी ग्राफिक्स बनाने के लिए एक शक्तिशाली उपकरण। रिएक्ट थ्री फाइबर रिएक्ट थ्री.जेएस रिएक्ट थ्री फाइबर स्टैक के बारे में पर एक रैपर है जो वेब पर 3डी ग्राफिक्स बनाने के लिए की संरचना और सिद्धांतों का उपयोग करता है। यह स्टैक डेवलपर्स को की शक्ति को की सुविधा और लचीलेपन के साथ संयोजित करने की अनुमति देता है, जिससे एप्लिकेशन बनाने की प्रक्रिया अधिक सहज और व्यवस्थित हो जाती है। रिएक्ट थ्री फाइबर थ्री.जेएस रिएक्ट थ्री.जेएस रिएक्ट के मूल में यह विचार है कि एक दृश्य में आप जो कुछ भी बनाते हैं वह एक घटक है। यह डेवलपर्स को परिचित पैटर्न और कार्यप्रणाली लागू करने की अनुमति देता है। रिएक्ट थ्री फाइबर रिएक्ट का एक मुख्य लाभ पारिस्थितिकी तंत्र के साथ एकीकरण में आसानी है। इस लाइब्रेरी का उपयोग करते समय किसी भी अन्य टूल को अभी भी आसानी से एकीकृत किया जा सकता है। रिएक्ट थ्री फाइबर रिएक्ट रिएक्ट वेब-गेमडेव की प्रासंगिकता हाल के वर्षों में बड़े बदलाव हुए हैं, जो सरल 2डी गेम से लेकर डेस्कटॉप अनुप्रयोगों के तुलनीय जटिल 3डी प्रोजेक्ट तक विकसित हुआ है। लोकप्रियता और क्षमताओं में यह वृद्धि वेब-गेमडेव को एक ऐसा क्षेत्र बनाती है जिसे नजरअंदाज नहीं किया जा सकता है। वेब-गेमडेव में फ़्लैश वेब गेमिंग का एक मुख्य लाभ इसकी पहुंच है। खिलाड़ियों को कोई अतिरिक्त सॉफ़्टवेयर डाउनलोड और इंस्टॉल करने की आवश्यकता नहीं है - बस अपने ब्राउज़र में लिंक पर क्लिक करें। यह खेलों के वितरण और प्रचार को सरल बनाता है, जिससे वे दुनिया भर में व्यापक दर्शकों के लिए उपलब्ध हो जाते हैं। अंत में, वेब गेम विकास डेवलपर्स के लिए परिचित प्रौद्योगिकियों का उपयोग करके गेमडेव में अपना हाथ आजमाने का एक शानदार तरीका हो सकता है। उपलब्ध उपकरणों और पुस्तकालयों के लिए धन्यवाद, 3डी ग्राफिक्स में अनुभव के बिना भी, दिलचस्प और उच्च-गुणवत्ता वाली परियोजनाएं बनाना संभव है! आधुनिक ब्राउज़रों में गेम का प्रदर्शन आधुनिक ब्राउज़रों ने काफी सरल वेब ब्राउज़िंग टूल से लेकर जटिल एप्लिकेशन और गेम चलाने के लिए शक्तिशाली प्लेटफ़ॉर्म तक विकसित होकर एक लंबा सफर तय किया है। , , और जैसे प्रमुख ब्राउज़रों को उच्च प्रदर्शन सुनिश्चित करने के लिए लगातार अनुकूलित और विकसित किया जा रहा है, जिससे वे जटिल अनुप्रयोगों को विकसित करने के लिए एक आदर्श मंच बन गए हैं। क्रोम फ़ायरफ़ॉक्स एज अन्य ब्राउज़र-आधारित गेमिंग के विकास को बढ़ावा देने वाले प्रमुख उपकरणों में से एक है। इस मानक ने डेवलपर्स को हार्डवेयर ग्राफिक्स त्वरण का उपयोग करने की अनुमति दी, जिससे 3डी गेम के प्रदर्शन में काफी सुधार हुआ। अन्य वेबएपीआई के साथ मिलकर, सीधे ब्राउज़र में प्रभावशाली वेब एप्लिकेशन बनाने की नई संभावनाएं खोलता है। WebGL वेबजीएल फिर भी, ब्राउज़र के लिए गेम विकसित करते समय, विभिन्न प्रदर्शन पहलुओं पर विचार करना महत्वपूर्ण है: संसाधन अनुकूलन, मेमोरी प्रबंधन और विभिन्न उपकरणों के लिए अनुकूलन सभी प्रमुख बिंदु हैं जो किसी परियोजना की सफलता को प्रभावित कर सकते हैं। तैयार रहें! हालाँकि, शब्द और सिद्धांत एक चीज़ हैं, लेकिन व्यावहारिक अनुभव बिल्कुल अलग है। वेब गेम विकास की पूरी क्षमता को वास्तव में समझने और उसकी सराहना करने के लिए, सबसे अच्छा तरीका विकास प्रक्रिया में खुद को डुबो देना है। इसलिए, सफल वेब गेम विकास के एक उदाहरण के रूप में, हम अपना खुद का गेम बनाएंगे। यह प्रक्रिया हमें विकास के प्रमुख पहलुओं को सीखने, वास्तविक समस्याओं का सामना करने और उनका समाधान खोजने और यह देखने की अनुमति देगी कि वेब गेम डेवलपमेंट प्लेटफ़ॉर्म कितना शक्तिशाली और लचीला हो सकता है। लेखों की एक श्रृंखला में, हम देखेंगे कि इस लाइब्रेरी की सुविधाओं का उपयोग करके प्रथम-व्यक्ति शूटर कैसे बनाया जाए, और वेब-गेमडेव की रोमांचक दुनिया में गोता लगाएँ! अंतिम डेमो https://codesandbox.io/p/github/JI0PATA/fps-game?embedable=true पर रिपॉजिटरी GitHub अब, चलिए शुरू करें! प्रोजेक्ट स्थापित करना और पैकेज स्थापित करना सबसे पहले, हमें एक प्रोजेक्ट टेम्पलेट की आवश्यकता होगी। तो चलिए इसे इंस्टॉल करके शुरू करते हैं। रिएक्ट npm create vite@latest लाइब्रेरी का चयन करें; रिएक्ट चुनें. जावास्क्रिप्ट अतिरिक्त एनपीएम पैकेज स्थापित करें। npm install three @react-three/fiber @react-three/drei @react three/rapier zustand @tweenjs/tween.js फिर हमारे प्रोजेक्ट से सभी अनावश्यक । हटा दें अनुभाग कोड कैनवास डिस्प्ले को अनुकूलित करना फ़ाइल में, एक div तत्व जोड़ें जो पृष्ठ पर स्कोप के रूप में प्रदर्शित होगा। एक घटक डालें और कैमरे का दृश्य क्षेत्र सेट करें। घटक के अंदर घटक रखें। Main.jsx कैनवास कैनवास ऐप आइए यूआई तत्वों को स्क्रीन की पूरी ऊंचाई तक फैलाने के लिए में स्टाइल जोड़ें और स्क्रीन के केंद्र में स्कोप को एक सर्कल के रूप में प्रदर्शित करें। Index.css घटक में हम एक घटक जोड़ते हैं, जो आकाश के रूप में हमारे गेम दृश्य में पृष्ठभूमि के रूप में प्रदर्शित होगा। ऐप स्काई अनुभाग कोड फर्श की सतह आइए एक कंपोनेंट बनाएं और इसे कंपोनेंट में रखें। ग्राउंड ऐप में, एक सपाट सतह तत्व बनाएं। Y अक्ष पर इसे नीचे की ओर ले जाएं ताकि यह तल कैमरे के दृश्य क्षेत्र में हो। और विमान को क्षैतिज बनाने के लिए उसे X अक्ष पर भी पलटें। ग्राउंड भले ही हमने भौतिक रंग के रूप में ग्रे निर्दिष्ट किया है, विमान पूरी तरह से काला दिखाई देता है। अनुभाग कोड बुनियादी प्रकाश व्यवस्था डिफ़ॉल्ट रूप से, दृश्य में कोई प्रकाश नहीं है, तो चलिए एक प्रकाश स्रोत जोड़ते हैं, जो ऑब्जेक्ट को सभी तरफ से रोशन करता है और इसमें कोई निर्देशित किरण नहीं होती है। एक पैरामीटर के रूप में चमक की तीव्रता निर्धारित करें। ambientLight अनुभाग कोड फर्श की सतह के लिए बनावट फर्श की सतह एक समान न दिखे, इसके लिए हम बनावट जोड़ेंगे। पूरी सतह पर दोहराई जाने वाली कोशिकाओं के रूप में फर्श की सतह का एक पैटर्न बनाएं। फ़ोल्डर में बनावट के साथ एक पीएनजी छवि जोड़ें। संपत्ति दृश्य पर बनावट लोड करने के लिए, आइए पैकेज से हुक का उपयोग करें। और हुक के लिए एक पैरामीटर के रूप में हम फ़ाइल में आयातित बनावट छवि को पास करेंगे। क्षैतिज अक्षों में छवि की पुनरावृत्ति सेट करें। @react- three/drei useTexture अनुभाग कोड कैमरा मूवमेंट पैकेज से घटक का उपयोग करके, स्क्रीन पर कर्सर को ठीक करें ताकि जब आप माउस को घुमाएं तो वह हिले नहीं, लेकिन दृश्य पर कैमरे की स्थिति बदल जाए। @React-Three/drei पॉइंटरलॉककंट्रोल आइए घटक के लिए एक छोटा सा संपादन करें। ग्राउंड अनुभाग कोड भौतिकी जोड़ना स्पष्टता के लिए, आइए दृश्य में एक साधारण घन जोड़ें। <mesh position={[0, 3, -5]}> <boxGeometry /> </mesh> अभी वह अंतरिक्ष में ही लटका हुआ है. दृश्य में "भौतिकी" जोड़ने के लिए पैकेज से घटक का उपयोग करें। एक पैरामीटर के रूप में, गुरुत्वाकर्षण क्षेत्र को कॉन्फ़िगर करें, जहां हम अक्षों के साथ गुरुत्वाकर्षण बल निर्धारित करते हैं। @react- three/rapier भौतिकी <Physics gravity={[0, -20, 0]}> <Ground /> <mesh position={[0, 3, -5]}> <boxGeometry /> </mesh> </Physics> हालाँकि, हमारा घन भौतिकी घटक के अंदर है, लेकिन उसे कुछ नहीं होता है। क्यूब को वास्तविक भौतिक वस्तु की तरह व्यवहार करने के लिए, हमें इसे पैकेज से घटक में लपेटना होगा। @react- three/rapier RigidBody उसके बाद, हम तुरंत देखेंगे कि हर बार जब पृष्ठ पुनः लोड होता है, तो घन गुरुत्वाकर्षण के प्रभाव में नीचे गिर जाता है। लेकिन अब एक और कार्य है - फर्श को एक ऐसी वस्तु बनाना आवश्यक है जिसके साथ घन बातचीत कर सके, और जिसके आगे वह नहीं गिरेगा। अनुभाग कोड एक भौतिक वस्तु के रूप में फर्श आइए घटक पर वापस जाएं और फर्श की सतह पर एक आवरण के रूप में एक घटक जोड़ें। ग्राउंड रिगिडबॉडी अब गिरते समय, घन वास्तविक भौतिक वस्तु की तरह फर्श पर रहता है। अनुभाग कोड किसी चरित्र को भौतिकी के नियमों के अधीन करना आइए एक घटक बनाएं जो दृश्य पर चरित्र को नियंत्रित करेगा। प्लेयर पात्र जोड़े गए घन के समान ही भौतिक वस्तु है, इसलिए इसे फर्श की सतह के साथ-साथ दृश्य पर घन के साथ भी बातचीत करनी चाहिए। इसीलिए हम घटक जोड़ते हैं। और चलिए पात्र को एक कैप्सूल के रूप में बनाते हैं। RigidBody घटक को भौतिकी घटक के अंदर रखें। प्लेयर अब हमारा किरदार सीन पर आ गया है. अनुभाग कोड किसी पात्र को हिलाना - एक हुक बनाना चरित्र को कुंजियों का उपयोग करके नियंत्रित किया जाएगा, और उपयोग करके कूदें। WASD स्पेसबार का अपने स्वयं के रिएक्ट-हुक के साथ, हम चरित्र को आगे बढ़ाने के तर्क को लागू करते हैं। आइए एक फ़ाइल बनाएं और वहां एक नया फ़ंक्शन जोड़ें। हुक.जेएस यूज़पर्सनकंट्रोल आइए किसी ऑब्जेक्ट को {"keycode": "क्रिया की जाने वाली क्रिया"} प्रारूप में परिभाषित करें। इसके बाद, कीबोर्ड कुंजी दबाने और जारी करने के लिए ईवेंट हैंडलर जोड़ें। जब हैंडलर चालू हो जाते हैं, तो हम वर्तमान में की जा रही कार्रवाइयों का निर्धारण करेंगे और उनकी सक्रिय स्थिति को अपडेट करेंगे। अंतिम परिणाम के रूप में, हुक एक ऑब्जेक्ट को {"कार्य प्रगति पर है": "स्थिति"} प्रारूप में लौटाएगा। अनुभाग कोड किसी पात्र को हिलाना - एक हुक लागू करना हुक को लागू करने के बाद, इसका उपयोग चरित्र को नियंत्रित करते समय किया जाना चाहिए। घटक में हम गति स्थिति ट्रैकिंग जोड़ेंगे और चरित्र की गति दिशा के वेक्टर को अपडेट करेंगे। यूज़पर्सनकंट्रोल्स प्लेयर हम वेरिएबल्स को भी परिभाषित करेंगे जो आंदोलन दिशाओं की स्थिति को संग्रहीत करेंगे। चरित्र की स्थिति को अद्यतन करने के लिए, आइए पैकेज द्वारा प्रदान किए गए । यह हुक के समान काम करता है और फ़ंक्शन के मुख्य भाग को प्रति सेकंड लगभग 60 बार निष्पादित करता है। @react- three/fiber फ़्रेम का उपयोग करें requestAnimationFrame कोड स्पष्टीकरण: प्लेयर ऑब्जेक्ट के लिए एक लिंक बनाएं. यह लिंक दृश्य पर प्लेयर ऑब्जेक्ट के साथ सीधे संपर्क की अनुमति देगा। 1. const प्लेयरRef = useRef(); जब एक हुक का उपयोग किया जाता है, तो बूलियन मान वाला एक ऑब्जेक्ट यह दर्शाता है कि वर्तमान में खिलाड़ी द्वारा कौन से नियंत्रण बटन दबाए गए हैं। 2. const {आगे, पीछे, बाएँ, दाएँ, कूदें } = usePersonControls(); एनीमेशन के प्रत्येक फ्रेम पर हुक को बुलाया जाता है। इस हुक के अंदर, खिलाड़ी की स्थिति और रैखिक वेग अद्यतन किया जाता है। 3. यूज़फ़्रेम((स्टेट) => {... }); किसी प्लेयर ऑब्जेक्ट की उपस्थिति की जाँच करता है। यदि कोई प्लेयर ऑब्जेक्ट नहीं है, तो त्रुटियों से बचने के लिए फ़ंक्शन निष्पादन बंद कर देगा। 4. यदि (!playerRef.current) वापसी; खिलाड़ी का वर्तमान रैखिक वेग प्राप्त करें। 5. स्थिरांक वेग = प्लेयरRef.current.linvel(); दबाए गए बटनों के आधार पर आगे/पीछे गति वेक्टर सेट करें। 6. फ्रंटवेक्टर.सेट(0, 0, पिछड़ा - आगे); बाएँ/दाएँ मूवमेंट वेक्टर सेट करें। 7. साइडवेक्टर.सेट(बाएँ - दाएँ, 0, 0); मूवमेंट वेक्टर को घटाकर, परिणाम को सामान्य करके (ताकि वेक्टर की लंबाई 1 हो) और मूवमेंट गति स्थिरांक से गुणा करके खिलाड़ी मूवमेंट के अंतिम वेक्टर की गणना करें। 8. दिशा.उपवेक्टर(फ्रंटवेक्टर, साइडवेक्टर).सामान्यीकरण().गुणास्केलर(MOVE_SPEED); यह सुनिश्चित करने के लिए कि यह परिवर्तनों पर प्रतिक्रिया करता है, खिलाड़ी ऑब्जेक्ट को "जागृत" करता है। यदि आप इस पद्धति का उपयोग नहीं करते हैं, तो कुछ समय बाद वस्तु "सो जाएगी" और स्थिति परिवर्तन पर प्रतिक्रिया नहीं करेगी। 9. प्लेयररेफ.करंट.वेकअप(); गति की गणना की गई दिशा के आधार पर खिलाड़ी के नए रैखिक वेग को सेट करें और वर्तमान ऊर्ध्वाधर वेग को बनाए रखें (ताकि छलांग या गिरावट को प्रभावित न करें)। 10. प्लेयरRef.current.setLinvel({ x: दिशा.x, y: वेग.y, z: दिशा.z }); परिणामस्वरूप, कुंजियाँ दबाने पर, पात्र दृश्य के चारों ओर घूमने लगा। वह घन के साथ भी बातचीत कर सकता है, क्योंकि वे दोनों भौतिक वस्तुएं हैं। WASD अनुभाग कोड किसी पात्र को हिलाना - कूदना जंप को लागू करने के लिए, आइए और पैकेज से कार्यक्षमता का उपयोग करें। इस उदाहरण में, आइए जांचें कि पात्र जमीन पर है और जंप कुंजी दबाई गई है। इस मामले में, हम Y-अक्ष पर वर्ण की दिशा और त्वरण बल निर्धारित करते हैं। @dimforge/rapier3d-compat @react- three/rapier के लिए हम सभी अक्षों पर द्रव्यमान और ब्लॉक रोटेशन जोड़ देंगे, ताकि वह दृश्य पर अन्य वस्तुओं से टकराते समय अलग-अलग दिशाओं में न गिरे। प्लेयर कोड स्पष्टीकरण: भौतिकी इंजन दृश्य तक पहुंच प्राप्त करना। इसमें सभी भौतिक वस्तुएँ शामिल हैं और उनकी परस्पर क्रिया का प्रबंधन करता है। कॉन्स्ट वर्ल्ड = रेपियर.वर्ल्ड; रैपियर यहीं पर "रेकास्टिंग" (रेकास्टिंग) होती है। एक किरण बनाई जाती है जो खिलाड़ी की वर्तमान स्थिति से शुरू होती है और y-अक्ष को नीचे की ओर इंगित करती है। यह किरण दृश्य में "डाली" जाती है ताकि यह निर्धारित किया जा सके कि यह दृश्य में किसी वस्तु के साथ प्रतिच्छेद करती है या नहीं। स्थिरांक रे = विश्व.कास्टरे(नया RAPIER.Ray(playerRef.current.translation(), { x: 0, y: -1, z: 0 })); यदि खिलाड़ी मैदान पर है तो स्थिति की जाँच की जाती है: स्थिरांक ग्राउंडेड = रे && रे.कोलाइडर && Math.abs(ray.toi) <= 1.5; - क्या बनाई गई थी; किरण किरण - क्या किरण घटनास्थल पर किसी वस्तु से टकराई; ray.collider - किरण का "एक्सपोज़र टाइम"। यदि यह मान दिए गए मान से कम या उसके बराबर है, तो यह संकेत दे सकता है कि खिलाड़ी सतह के इतना करीब है कि उसे "जमीन पर" माना जा सकता है। Math.abs(ray.toi) आपको घटक को संशोधित करने की भी आवश्यकता है ताकि "लैंडिंग" स्थिति निर्धारित करने के लिए किरण-अनुरेखित एल्गोरिदम सही ढंग से काम कर सके, एक भौतिक वस्तु जोड़कर जो दृश्य में अन्य वस्तुओं के साथ बातचीत करेगी। ग्राउंड आइए दृश्य को बेहतर ढंग से देखने के लिए कैमरे को थोड़ा ऊपर उठाएं। अनुभाग कोड पहले प्रतिबद्ध दूसरा प्रतिबद्ध पात्र के पीछे कैमरा ले जाना कैमरे को स्थानांतरित करने के लिए, हम प्लेयर की वर्तमान स्थिति प्राप्त करेंगे और हर बार फ्रेम रीफ्रेश होने पर कैमरे की स्थिति बदल देंगे। और चरित्र को ठीक उसी प्रक्षेप पथ पर ले जाने के लिए, जहां कैमरा निर्देशित है, हमें जोड़ने की आवश्यकता है। applyEuler कोड स्पष्टीकरण: विधि निर्दिष्ट यूलर कोणों के आधार पर एक वेक्टर पर रोटेशन लागू करती है। इस मामले में, कैमरा रोटेशन वेक्टर पर लागू होता है। इसका उपयोग कैमरा ओरिएंटेशन के सापेक्ष गति का मिलान करने के लिए किया जाता है, ताकि प्लेयर कैमरा घुमाए जाने की दिशा में आगे बढ़े। अप्लाईयूलर दिशा आइए के आकार को थोड़ा समायोजित करें और इसे क्यूब के सापेक्ष लंबा बनाएं, का आकार बढ़ाएं और "जंप" तर्क को ठीक करें। प्लेयर कैप्सूलकोलाइडर अनुभाग कोड पहले प्रतिबद्ध दूसरा प्रतिबद्ध घनों का निर्माण दृश्य को पूरी तरह खाली न लगे, इसके लिए आइए क्यूब जेनरेशन जोड़ें। JSON फ़ाइल में, प्रत्येक क्यूब के निर्देशांक सूचीबद्ध करें और फिर उन्हें दृश्य पर प्रदर्शित करें। ऐसा करने के लिए, एक फ़ाइल बनाएं, जिसमें हम निर्देशांक की एक सरणी सूचीबद्ध करेंगे। क्यूब्स.जेसन [ [0, 0, -7], [2, 0, -7], [4, 0, -7], [6, 0, -7], [8, 0, -7], [10, 0, -7] ] फ़ाइल में, एक घटक बनाएं, जो एक लूप में क्यूब्स उत्पन्न करेगा। और घटक सीधे ऑब्जेक्ट उत्पन्न करेगा। Cube.jsx Cubes क्यूब import {RigidBody} from "@react-three/rapier"; import cubes from "./cubes.json"; export const Cubes = () => { return cubes.map((coords, index) => <Cube key={index} position={coords} />); } const Cube = (props) => { return ( <RigidBody {...props}> <mesh castShadow receiveShadow> <meshStandardMaterial color="white" /> <boxGeometry /> </mesh> </RigidBody> ); } आइए पिछले सिंगल क्यूब को हटाकर बनाए गए घटक को घटक में जोड़ें। क्यूब्स ऐप अनुभाग कोड प्रोजेक्ट में मॉडल आयात करना आइए अब दृश्य में एक 3D मॉडल जोड़ें। आइए चरित्र के लिए एक हथियार मॉडल जोड़ें। आइए एक 3D मॉडल की तलाश से शुरुआत करें। उदाहरण के लिए, आइए लेते हैं। इसे मॉडल को जीएलटीएफ प्रारूप में डाउनलोड करें और प्रोजेक्ट के रूट में संग्रह को अनपैक करें। मॉडल को दृश्य में आयात करने के लिए आवश्यक प्रारूप प्राप्त करने के लिए, हमें ऐड-ऑन पैकेज स्थापित करने की आवश्यकता होगी। gltf-पाइपलाइन npm i -D gltf-pipeline पैकेज का उपयोग करके, मॉडल को से में पुनः परिवर्तित करें, क्योंकि इस प्रारूप में सभी मॉडल डेटा एक फ़ाइल में रखे जाते हैं। जेनरेट की गई फ़ाइल के लिए आउटपुट निर्देशिका के रूप में हम फ़ोल्डर निर्दिष्ट करते हैं। Gltf-पाइपलाइन GLTF प्रारूप GLB प्रारूप सार्वजनिक gltf-pipeline -i weapon/scene.gltf -o public/weapon.glb फिर हमें एक प्रतिक्रिया घटक उत्पन्न करने की आवश्यकता है जिसमें इस मॉडल को दृश्य में जोड़ने के लिए उसका मार्कअप शामिल होगा। आइए डेवलपर्स के उपयोग करें। @react- three/fiber आधिकारिक संसाधन का कनवर्टर पर जाने से आपको परिवर्तित फ़ाइल लोड करने की आवश्यकता होगी। हथियार.जीएलबी ड्रैग एंड ड्रॉप या एक्सप्लोरर सर्च का उपयोग करके, इस फ़ाइल को ढूंढें और इसे डाउनलोड करें। कनवर्टर में हम जेनरेट किए गए प्रतिक्रिया-घटक को देखेंगे, जिसका कोड हम अपने प्रोजेक्ट में एक नई फ़ाइल में स्थानांतरित करेंगे, घटक का नाम फ़ाइल के समान नाम में बदल देंगे। WeaponModel.jsx अनुभाग कोड घटनास्थल पर हथियार का मॉडल प्रदर्शित करना अब बनाए गए मॉडल को दृश्य में आयात करते हैं। फ़ाइल में घटक जोड़ें। App.jsx WeaponModel अनुभाग कोड छाया जोड़ना हमारे दृश्य में इस बिंदु पर, कोई भी वस्तु छाया नहीं डाल रही है। दृश्य पर सक्षम करने के लिए आपको घटक में विशेषता जोड़ने की आवश्यकता है। छाया को कैनवास छाया इसके बाद, हमें एक नया प्रकाश स्रोत जोड़ने की आवश्यकता है। इस तथ्य के बावजूद कि हमारे पास पहले से ही दृश्य पर है, यह वस्तुओं के लिए छाया नहीं बना सकता है, क्योंकि इसमें दिशात्मक प्रकाश किरण नहीं है। तो आइए नामक एक नया प्रकाश स्रोत जोड़ें और इसे कॉन्फ़िगर करें। " " छाया मोड को सक्षम करने की विशेषता है। यह इस पैरामीटर का जोड़ है जो इंगित करता है कि यह वस्तु अन्य वस्तुओं पर छाया डाल सकती है। परिवेश प्रकाश डायरेक्शनललाइट कास्ट कास्टशैडो उसके बाद, आइए घटक में एक और विशेषता जोड़ें, जिसका अर्थ है कि दृश्य में घटक स्वयं छाया प्राप्त और प्रदर्शित कर सकता है। ग्राउंड रिसीवशैडो दृश्य पर अन्य वस्तुओं में समान विशेषताएं जोड़ी जानी चाहिए: क्यूब्स और प्लेयर। क्यूब्स के लिए हम और जोड़ेंगे, क्योंकि वे दोनों छाया डाल और प्राप्त कर सकते हैं, और प्लेयर के लिए हम केवल जोड़ेंगे। कास्टशैडो रिसीवशैडो कास्टशैडो आइए के लिए जोड़ें। प्लेयर कास्टशैडो के लिए और जोड़ें। क्यूब कास्टशैडो रिसीवशैडो अनुभाग कोड छाया जोड़ना - छाया कतरन को ठीक करना अब अगर आप ध्यान से देखेंगे तो पाएंगे कि जिस सतह पर छाया पड़ती है उसका क्षेत्रफल काफी छोटा है। और इस क्षेत्र से आगे जाने पर छाया आसानी से कट जाती है। इसका कारण यह है कि डिफ़ॉल्ट रूप से कैमरा से प्रदर्शित छाया के केवल एक छोटे से क्षेत्र को कैप्चर करता है। हम दृश्यता के इस क्षेत्र का विस्तार करने के लिए अतिरिक्त विशेषताओं जोड़कर घटक का उपयोग कर सकते हैं। इन विशेषताओं को जोड़ने के बाद, छाया थोड़ी धुंधली हो जाएगी। गुणवत्ता में सुधार के लिए, हम विशेषता जोड़ेंगे। दिशात्मक प्रकाश शैडो-कैमरा- (ऊपर, नीचे, बाएँ, दाएँ) को दिशात्मक प्रकाश शैडो-मैपसाइज़ अनुभाग कोड किसी पात्र से हथियार बांधना आइए अब प्रथम-व्यक्ति हथियार प्रदर्शन जोड़ें। एक नया घटक बनाएं, जिसमें हथियार व्यवहार तर्क और 3डी मॉडल ही शामिल होगा। हथियार import {WeaponModel} from "./WeaponModel.jsx"; export const Weapon = (props) => { return ( <group {...props}> <WeaponModel /> </group> ); } आइए इस घटक को चरित्र के के समान स्तर पर रखें और हुक में हम कैमरे से मूल्यों की स्थिति के आधार पर स्थिति और रोटेशन कोण सेट करेंगे। रिगिडबॉडी यूज़फ़्रेम अनुभाग कोड चलते समय हथियार हिलाने का एनीमेशन चरित्र की चाल को और अधिक स्वाभाविक बनाने के लिए, हम चलते समय हथियार को थोड़ा हिलाएंगे। एनीमेशन बनाने के लिए हम स्थापित लाइब्रेरी का उपयोग करेंगे। ट्विन.जेएस घटक को एक समूह टैग में लपेटा जाएगा ताकि आप हुक के माध्यम से इसमें एक संदर्भ जोड़ सकें। हथियार useRef आइए एनीमेशन को सहेजने के लिए कुछ जोड़ें। यूज़स्टेट आइए एनीमेशन आरंभ करने के लिए एक फ़ंक्शन बनाएं। कोड स्पष्टीकरण: किसी ऑब्जेक्ट का उसकी वर्तमान स्थिति से नई स्थिति में "स्विंगिंग" एनीमेशन बनाना। const twSwayingAnimation = new TWEEN.Tween(currentPosition) ... पहला एनीमेशन पूरा होने के बाद अपनी प्रारंभिक स्थिति में वापस लौटने वाली वस्तु का एक एनीमेशन बनाना। const twSwayingBackAnimation = new TWEEN.Tween(currentPosition) ... दो एनिमेशन को कनेक्ट करना ताकि जब पहला एनीमेशन पूरा हो जाए, तो दूसरा एनीमेशन स्वचालित रूप से शुरू हो जाए। twSwayingAnimation.चेन(twSwayingBackAnimation); में हम एनीमेशन इनिशियलाइज़ेशन फ़ंक्शन को कॉल करते हैं। यूज़इफ़ेक्ट अब उस क्षण को निर्धारित करना आवश्यक है जिसके दौरान आंदोलन होता है। यह चरित्र की दिशा के वर्तमान वेक्टर को निर्धारित करके किया जा सकता है। यदि चरित्र में कोई हलचल होती है, तो हम एनीमेशन को ताज़ा करेंगे और समाप्त होने पर इसे फिर से चलाएंगे। कोड स्पष्टीकरण: यहां वस्तु की गति की स्थिति की जांच की जाती है। यदि दिशा वेक्टर की लंबाई 0 से अधिक है, तो इसका मतलब है कि वस्तु की गति की दिशा है। स्थिरांक isMoving = दिशा.लंबाई() > 0; यह स्थिति तब निष्पादित होती है जब ऑब्जेक्ट घूम रहा हो और "स्विंगिंग" एनीमेशन समाप्त हो गया हो। यदि (isMoving && isSwayingAnimationFined) { ... } घटक में, आइए एक जोड़ें जहां हम ट्वीन एनीमेशन को अपडेट करेंगे। ऐप यूज़फ़्रेम लाइब्रेरी में सभी सक्रिय एनिमेशन को अपडेट करता है। यह सुनिश्चित करने के लिए कि सभी एनिमेशन सुचारू रूप से चलें, प्रत्येक एनीमेशन फ्रेम पर इस विधि को बुलाया जाता है। TWEEN.update() TWEEN.js अनुभाग कोड: पहले प्रतिबद्ध दूसरा प्रतिबद्ध रीकॉइल एनीमेशन हमें उस क्षण को परिभाषित करने की आवश्यकता है जब गोली चलाई जाती है - अर्थात, जब माउस बटन दबाया जाता है। आइए इस स्थिति को संग्रहीत करने के लिए जोड़ें, हथियार ऑब्जेक्ट के संदर्भ को संग्रहीत करने के लिए और माउस बटन को दबाने और छोड़ने के लिए दो ईवेंट हैंडलर जोड़ें। यूज़स्टेट यूज़रेफ आइए माउस बटन पर क्लिक करते समय एक रिकॉइल एनीमेशन लागू करें। हम इस उद्देश्य के लिए लाइब्रेरी का उपयोग करेंगे। tween.js आइए हम पुनरावृत्ति बल और एनीमेशन अवधि के लिए स्थिरांक को परिभाषित करें। हथियार विगल एनीमेशन की तरह, हम रिकॉइल और होम पोजीशन एनीमेशन पर लौटने के लिए दो यूज़स्टेट स्टेट्स और एनीमेशन एंड स्टेटस के साथ एक स्टेट जोड़ते हैं। आइए रिकॉइल एनीमेशन का एक यादृच्छिक वेक्टर प्राप्त करने के लिए फ़ंक्शन बनाएं - और । generateRecoilOffset generateNewPositionOfRecoil रिकॉइल एनीमेशन आरंभ करने के लिए एक फ़ंक्शन बनाएं। हम भी जोड़ेंगे, जिसमें हम "शॉट" स्थिति को निर्भरता के रूप में निर्दिष्ट करेंगे, ताकि प्रत्येक शॉट पर एनीमेशन फिर से प्रारंभ हो और नए अंत निर्देशांक उत्पन्न हों। useEffect और में, आइए फायरिंग के लिए माउस कुंजी को "होल्ड" करने के लिए एक चेक जोड़ें, ताकि कुंजी जारी होने तक फायरिंग एनीमेशन बंद न हो। यूज़फ़्रेम अनुभाग कोड निष्क्रियता के दौरान एनीमेशन चरित्र के लिए "निष्क्रियता" के एनीमेशन का एहसास करें, ताकि खेल "फांसी" की कोई भावना न हो। ऐसा करने के लिए, आइए के माध्यम से कुछ नए राज्य जोड़ें। useState आइए राज्य से मूल्यों का उपयोग करने के लिए "विगल" एनीमेशन की शुरुआत को ठीक करें। विचार यह है कि अलग-अलग स्थितियाँ: चलना या रुकना, एनीमेशन के लिए अलग-अलग मानों का उपयोग करेगी और हर बार एनीमेशन को पहले आरंभ किया जाएगा। निष्कर्ष इस भाग में हमने दृश्य निर्माण और चरित्र आंदोलन को लागू किया है। हमने एक हथियार मॉडल, फायरिंग के दौरान और निष्क्रिय होने पर रिकॉइल एनीमेशन भी जोड़ा है। अगले भाग में हम नई कार्यक्षमता जोड़कर अपने गेम को परिष्कृत करना जारी रखेंगे। भी प्रकाशित किया गया है. यहाँ
