VULK में Three.js ब्राउज़र गेम कैसे बनाएँ

17 जुलाई 2026 को अपडेट किया गया — सत्यापित प्लेटफ़ॉर्म डेटा, परखे हुए प्रॉम्प्ट पैटर्न और मौजूदा डिप्लॉय विवरण के साथ ताज़ा किया गया।

VULK में Three.js ब्राउज़र गेम कैसे बनाते हैं?

पूरा जवाब एक पैराग्राफ़ में: गेम को — मैकेनिक्स, कंट्रोल, कैमरा, जीत/हार की शर्तें — एक ही प्रॉम्प्ट में बयान करें, और VULK पहचान लेता है कि यह गेम है और पूरा Vite + Three.js प्रोजेक्ट जेनरेट करता है: रेंडरर और सीन सेटअप, फ़िक्स्ड-टाइमस्टेप फ़िज़िक्स वर्ल्ड (Cannon.js), प्लेयर कंट्रोल, छाया के साथ लाइटिंग, delta time वाला requestAnimationFrame गेम लूप, और कैनवस के ऊपर एक HTML HUD ओवरले। गेम लाइव प्रीव्यू में तुरंत चलता है; फिर आप फ़ॉलो-अप प्रॉम्प्ट से इटरेट करते हैं ("डबल जंप जोड़ो", "साउंड जोड़ो", "मोबाइल टच कंट्रोल जोड़ो") और एक क्लिक से Cloudflare Pages पर डिप्लॉय करते हैं। WebGL बॉयलरप्लेट कभी हाथ से नहीं लिखते।

यह कोई निच वर्कफ़्लो नहीं है। गेम्स और पज़ल AI-जेनरेटेड ऐप्स की #2 श्रेणी हैं, सभी प्रोजेक्ट्स का 5.4%, सिर्फ़ डैशबोर्ड से पीछे (VULK प्लेटफ़ॉर्म डेटा, जुलाई 2026, N = 10,994 सक्रिय प्रोजेक्ट) — और माध्यिका बिल्डर साइनअप के 47 सेकंड बाद पहली काम करती ऐप शिप करता है। इस गाइड का बाक़ी हिस्सा कवर करता है कि क्या जेनरेट होता है, हर गेम शैली के लिए आज़माए प्रॉम्प्ट, परफ़ॉर्मेंस पैटर्न, और सार्वजनिक URL तक का रास्ता।

ब्राउज़र गेम्स के लिए Three.js ही क्यों?

Three.js ब्राउज़र में 3D रेंडरिंग की स्टैंडर्ड लाइब्रेरी है। यह WebGL को एक सीन ग्राफ़ मॉडल — कैमरा, मेश, लाइटें, materials — में समेट देती है, जिससे कच्चा शेडर कोड लिखे बिना इंटरैक्टिव 3D अनुभव बनाना व्यावहारिक हो जाता है। Cannon.js या Rapier जैसे फ़िज़िक्स इंजन के साथ मिलाने पर आपको टक्कर पहचान, गुरुत्वाकर्षण और रिजिड बॉडी डायनामिक्स मिलती है। VULK के साथ मिलाने पर एक ही प्रॉम्प्ट से पूरा गेम प्रोजेक्ट जेनरेट होता है।

VULK अपने आप पहचान लेता है कि आपका प्रॉम्प्ट किसी गेम का वर्णन कर रहा है। ऐसा होने पर जेनरेशन पाइपलाइन एक Three.js टेम्पलेट पर स्विच हो जाती है जिसमें रेंडर लूप, सीन सेटअप, कैमरा कंट्रोल और फ़िज़िक्स इंटीग्रेशन पहले से शामिल हैं। "Three.js इस्तेमाल करो" लिखने की ज़रूरत नहीं — बस वह गेम बताइए जो आप चाहते हैं।

गेम प्रॉम्प्ट के लिए VULK क्या जेनरेट करता है?

जब VULK गेम प्रॉम्प्ट पहचानता है, जेनरेटेड प्रोजेक्ट में फ़ाइलों और सिस्टमों का एक ख़ास सेट होता है:

हर गेम शैली के लिए कौन-से प्रॉम्प्ट काम करते हैं?

आपके प्रॉम्प्ट की सटीकता सीधे आउटपुट की जटिलता और गुणवत्ता तय करती है। आम गेम प्रकारों के उदाहरण:

प्लेटफ़ॉर्मर: "एक 3D प्लेटफ़ॉर्मर गेम बनाओ। प्लेयर एक गोला है जो तैरते प्लेटफ़ॉर्मों पर लुढ़कता है। प्लेटफ़ॉर्म आयताकार हैं, अलग-अलग रंगों और ऊँचाइयों पर। एक स्कोर काउंटर जोड़ो जो नए प्लेटफ़ॉर्म पर पहुँचने पर बढ़े। अगर प्लेयर y=-10 से नीचे गिरे, तो शुरुआत पर रीसेट। WASD कंट्रोल और जंप के लिए स्पेसबार जोड़ो। कैमरा पीछे से प्लेयर का पीछा करे।"

यह प्रॉम्प्ट रैंडम लेआउट वाले प्लेटफ़ॉर्म जेनरेशन, फ़ॉलो कैमरा, गिरावट की पहचान और स्कोर ट्रैकिंग चालू करता है। फ़िज़िक्स सिस्टम लुढ़कती गेंद को स्वाभाविक ढंग से सँभालता है।

एंडलेस रनर: "एक एंडलेस रनर गेम बनाओ। प्लेयर 3-लेन वाली सड़क पर अपने आप आगे दौड़ता है। ऐरो कीज़ से लेन बदलती है। बाधाएँ बेतरतीब आती हैं और प्लेयर को उनसे बचना है। समय के साथ गति बढ़ती है। तय की गई दूरी स्कोर के रूप में दिखाओ। टक्कर पर गेम ओवर।"

VULK बाधाओं के लिए ऑब्जेक्ट पूलिंग सिस्टम, स्मूद ट्रांज़िशन वाला लेन-स्विचिंग लॉजिक, बढ़ती कठिनाई, और प्लेयर व बाधा मेशों के बीच टक्कर पहचान जेनरेट करता है।

शूटर: "पॉइंटर लॉक कंट्रोल वाला फ़र्स्ट-पर्सन शूटर बनाओ। प्लेयर आयताकार एरीना में WASD से चलता है। दुश्मन लाल क्यूब हैं जो प्लेयर की ओर बढ़ते हैं। क्लिक से प्रोजेक्टाइल छूटें। दुश्मन 3 वार में नष्ट हों। हेल्थ बार और किल काउंट दिखाओ। दुश्मन हर 5 सेकंड में आएँ, समय के साथ बढ़ते हुए।"

यह पॉइंटर लॉक इंटीग्रेशन, शूटिंग के लिए रेकास्टिंग या प्रोजेक्टाइल फ़िज़िक्स, प्लेयर की ओर पाथफ़ाइंडिंग वाली दुश्मन AI, हेल्थ सिस्टम और स्पॉन प्रबंधन जेनरेट करता है।

पज़ल गेम: "एक 3D पज़ल गेम बनाओ जिसमें प्लेयर बक्सों को चिह्नित टाइलों पर धकेलता है। सोकोबान-शैली। ग्रिड-आधारित चाल, बढ़ती कठिनाई के 5 लेवल। चालों की संख्या और लेवल नंबर दिखाओ। आख़िरी चाल पलटने के लिए अनडू बटन।"

ग्रिड-आधारित चाल हर इनपुट के बाद स्थितियों को पूर्णांक निर्देशांकों पर स्नैप करके सँभाली जाती है। लेवल का डेटा 2D एरे के रूप में रहता है जो दीवारें, बक्से, लक्ष्य और प्लेयर की शुरुआती स्थिति परिभाषित करते हैं।

जेनरेटेड गेम को कैसे कस्टमाइज़ करें?

जेनरेटेड गेम एक स्टैंडर्ड Vite + Three.js प्रोजेक्ट है। हर फ़ाइल संपादन योग्य है। फ़ॉलो-अप प्रॉम्प्ट से किए जा सकने वाले आम कस्टमाइज़ेशन:

विज़ुअल स्टाइल बदलें: "प्लेटफ़ॉर्मों को टेक्सचर वाले पत्थर के ब्लॉक जैसा दिखाओ। सूर्यास्त ग्रेडिएंट वाला स्काईबॉक्स जोड़ो।" VULK टेक्सचर लोडिंग और एक क्यूब टेक्सचर या शेडर-आधारित स्काईबॉक्स जोड़ देगा।

साउंड जोड़ें: "जंप का साउंड इफ़ेक्ट, सिक्का उठाने की आवाज़ और बैकग्राउंड म्यूज़िक जोड़ो। Web Audio API इस्तेमाल करो।" जेनरेशन एक ऑडियो मैनेजर जोड़ता है जो साउंड फ़ाइलें प्रीलोड करके सही पलों पर बजाता है।

मोबाइल कंट्रोल जोड़ें: "टच कंट्रोल जोड़ो — बाईं ओर वर्चुअल जॉयस्टिक और दाईं ओर जंप बटन।" यह टच इवेंट लिसनर वाला HTML ओवरले जेनरेट करता है जो कीबोर्ड कंट्रोल वाले ही इनपुट सिस्टम में जाता है।

फ़िज़िक्स सुधारें: "गेंद दीवारों से रुकने की बजाय उछले। ज़मीन पर घर्षण जोड़ो ताकि न चलने पर गेंद धीमी हो।" ये Cannon.js की material प्रॉपर्टीज़ में बदलते हैं — उछाल के लिए restitution, सतहों के लिए घर्षण गुणांक।

यही इटरेटिव लूप है जिससे प्लेटफ़ॉर्म पर अच्छे गेम सच में बनते हैं: निर्माण की माध्यिका बातचीत 4 संदेशों की है, जबकि सबसे ज़्यादा निवेश वाले प्रोजेक्ट 25 पार कर जाते हैं (VULK प्लेटफ़ॉर्म डेटा, जुलाई 2026)। मूल मैकेनिक से शुरू करें, फिर परत-दर-परत निखार जोड़ें।

ब्राउज़र गेम को तेज़ कैसे रखें?

ब्राउज़र गेम DOM ऑपरेशनों के साथ मुख्य थ्रेड में चलते हैं, इसलिए परफ़ॉर्मेंस मायने रखती है। VULK के जेनरेटेड गेम्स में डिफ़ॉल्ट रूप से कई ऑप्टिमाइज़ेशन शामिल हैं:

• ज्यामिति का पुनरुपयोग — एक जैसी मेशें हर ऑब्जेक्ट के लिए नई बनाने की बजाय ज्यामिति और material इंस्टेंस साझा करती हैं।
• Frustum culling — Three.js कैमरे की नज़र से बाहर के ऑब्जेक्ट अपने आप हटा देता है, पर VULK प्लेयर से बहुत दूर के ऑब्जेक्टों की रेंडरिंग भी बंद कर देता है।
• फ़िक्स्ड फ़िज़िक्स टाइमस्टेप — फ़िज़िक्स रेंडर फ़्रेमरेट से स्वतंत्र एक-सी दर पर चलती है, जिससे कम FPS पर टनलिंग और ज़्यादा FPS पर अस्थिरता नहीं होती।
• ऑब्जेक्ट पूलिंग — जिन गेम्स में बहुत सारे ऑब्जेक्ट आते/जाते हैं (गोलियाँ, दुश्मन, कण), वहाँ ऑब्जेक्ट बनाकर गार्बेज कलेक्ट करने की बजाय पूल से रीसायकल होते हैं।

अगर फ़्रेम गिरते दिखें, तो एक अच्छा फ़ॉलो-अप प्रॉम्प्ट है: "गेम को मोबाइल परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ करो। शैडो मैप रेज़ॉल्यूशन घटाओ, ड्रॉ डिस्टेंस कम करो और ज्यामितियाँ सरल करो।" VULK रेंडरर सेटिंग्स और सीन की जटिलता उसी हिसाब से समायोजित कर देगा।

गेम को डिप्लॉय और शेयर कैसे करें?

जब VULK के रियल-टाइम प्रीव्यू में गेम से संतुष्ट हो जाएँ, Deploy क्लिक करें। गेम बिल्ड होकर Cloudflare Pages पर डिप्लॉय होता है, और आपको शेयर करने लायक़ सार्वजनिक URL मिलता है। डिप्लॉय हुआ गेम स्टैटिक है — सिर्फ़ HTML, JS और एसेट्स — इसलिए तेज़ी से लोड होता है और हर आधुनिक ब्राउज़र में चलता है।

लीडरबोर्ड या स्थायी स्टेट वाले गेम्स के लिए आप VULK से बैकएंड जेनरेट करवा सकते हैं: "एक लीडरबोर्ड जोड़ो। प्लेयर के नाम और तारीख़ के साथ टॉप 100 स्कोर स्टोर करो। गेम ओवर स्क्रीन पर लीडरबोर्ड दिखाओ।" यह VULK की बैकएंड जेनरेशन चालू करता है, गेम के साथ एक PostgreSQL डेटाबेस और API एंडपॉइंट जोड़ते हुए। यह पूरे प्लेटफ़ॉर्म पर आम है — जेनरेट हुईं सभी ऐप्स का 62% एक SQL डेटाबेस स्कीमा शामिल करता है (VULK प्लेटफ़ॉर्म डेटा, जुलाई 2026)।

गेम प्रॉम्प्ट सबसे अच्छा कब काम करते हैं?

VULK में Three.js गेम तब सबसे अच्छा काम करते हैं जब आप मैकेनिक्स साफ़-साफ़ बयान करते हैं। "एक मज़ेदार गेम बनाओ" जैसे अमूर्त विवरण सामान्य नतीजे देते हैं। "प्लेयर डबल-जंप करता है, दीवार पर स्लाइड करता है और डैश करता है" जैसे विशिष्ट मैकेनिक्स वही सिस्टम लागू किए हुए गेम देते हैं।

मूल मैकेनिक से शुरू करें। उसे प्रीव्यू में चलाएँ। फिर इटरेट करें — फ़ॉलो-अप प्रॉम्प्ट से दुश्मन, स्कोरिंग, लेवल, साउंड और विज़ुअल निखार जोड़ें। हर इटरेशन मौजूदा कोड पर बनता है, इसलिए आप शून्य से शुरू किए बिना जटिलता जमा करते हैं।

रेंडरिंग के लिए Three.js, फ़िज़िक्स के लिए Cannon.js और VULK की जेनरेशन पाइपलाइन का मेल यानी आइडिया से खेलने लायक़ प्रोटोटाइप तक दिनों की बजाय मिनटों में। वहाँ से, प्रॉम्प्ट या हाथ से कोड संपादन के ज़रिए निखार आपको एक पॉलिश गेम तक ले जाता है जिसे आप शिप कर सकते हैं।