एप्लिकेशन तक पहुँच लॉक है
इस 3D ट्यूटोरियल तक पहुँच पाने के लिए आपको पहले हमारे YouTube चैनल को सब्सक्राइब करना होगा।
रियल‑टाइम प्लान: Gemini के ज़रिए 3D वेब
प्रॉम्प्ट जेनरेटर को भूल जाइए। यहाँ पूरा इंटरएक्टिव प्लान है, कदम‑दर‑कदम। खाली चैट से लेकर इंटरएक्टिव 3D अनुभव तक – सिर्फ रियल‑टाइम में आर्टिफिशियल इंटेलिजेंस से बातचीत की मदद से।
कदम 1: prostředí की तैयारी
आपको अपने कंप्यूटर पर कुछ भी इंस्टॉल करने की आवश्यकता नहीं है। पूरा प्रोसेस पूरी तरह ब्राउज़र में ही चलेगा। सबसे तेज़ इटरेशन के लिए दो टैब को साथ‑साथ खोलें:
- मुफ़्त Google Gemini (gemini.google.com) खोलें।
- ऑनलाइन कोड एडिटर CodePen.io या PlayCode.io खोलें। यहाँ हम तुरंत जनरेट किया गया कोड टेस्ट करेंगे, बिना HTML soubory zakládat a ukládat किए।
कदम 2: शुरुआती मास्टर‑प्रॉम्प्ट
पहला प्रॉम्प्ट सबसे महत्वपूर्ण है। यह Gemini के लिए सीमाएँ निर्धारित करता है और टेक्नोलॉजिकल बेस सेट करता है (CDN से Three.js, सब एक ही फाइल में)। इस टेक्स्ट को कॉपी करें और Gemini में पेस्ट करें:
आप WebGL और Three.js लाइब्रेरी के एक्सपर्ट हैं। आपका काम एक काम करने वाला 3D सीन बनाने के लिए पूरा HTML कोड लिखना है (अंदर ही CSS और JS समेत)। आवश्यकताएँ: 1. बीच में एक घूमता हुआ 3D ऑब्जेक्ट बनाएँ (TorusKnot या Icosahedron)। 2. Three.js और OrbitControls को CDN लिंक (unpkg या cdnjs) से script टैग के ज़रिए इम्पोर्ट करें। 3. यह 'Single file' होना चाहिए – सब कुछ एक ही कोड ब्लॉक में, कोई import maps नहीं। 4. बाहरी मॉडल (GLTF) या टेक्सचर (JPG/PNG) का उपयोग न करें। सब कुछ कोड में ही प्रॉसीजरली बनाएँ (MeshStandardMaterial, लाइट्स, रंग)। 5. PointLight (बिंदु प्रकाश) और हल्की छायाएँ जोड़ें। 6. बैकग्राउंड को बहुत गहरे रंग पर सेट करें।
कदम 3: रन करना और जाँच
जैसे ही Gemini कोड जनरेट करे, उसे दाएँ ऊपर कोड वाले बॉक्स से कॉपी करें। फिर दूसरे टैब (जैसे CodePen) पर जाएँ और पूरा कोड केवल HTML वाले फ़ील्ड में पेस्ट करें (CSS और JS वाले फ़ील्ड खाली छोड़ें, हमारे कोड में सब कुछ शामिल है)।
टिप: आपको तुरंत घूमता हुआ 3D ऑब्जेक्ट दिखाई देगा। उस पर माउस से क्लिक कर खींचकर देखिए – OrbitControls की मदद से आप उसे घुमा सकते हैं!
कदम 4: रियल‑टाइम इटरेशन
अब वास्तविक समय में असली काम शुरू होता है। वापस Gemini में जाएँ। नया कोड लिखने या पुराना कोड भेजने की ज़रूरत नहीं (उसे याद है)। बस उससे चैट करते रहें और धीरे‑धीरे नई माँगें जोड़ते जाएँ। क्रम से ये संदेश आज़माएँ:
यह बहुत बढ़िया है। अब ऑब्जेक्ट के मटेरियल को सॉलिड रंग से बदलकर चमकता हुआ 'Wireframe' (जालीदार मॉडल) बना दो, नियॉन नीले और गुलाबी रंगों में।
बहुत अच्छा। अब सीन के बैकग्राउंड में धीरे‑धीरे घूमता हुआ particle सिस्टम (Points और PointsMaterial) जोड़ो, जो अंतरिक्ष में तारों का सिमुलेशन करेगा।
उत्कृष्ट। और अब ऐसा करो कि जब मैं माउस हिलाऊँ, तो स्क्रीन पर कर्सर की पोज़िशन के अनुसार लाइट्स के रंग स्मूद तरीके से बदलने लगें।
कदम 5: समस्याओं का समाधान (Debugging)
जब आप वास्तविक समय में कोड एडिट करते हैं, तो AI कभी‑कभी गलती कर देता है और CodePen पर आपको सिर्फ काली या सफेद स्क्रीन दिखती है। आपको प्रोग्रामिंग जानने की ज़रूरत नहीं, बस समस्या को चैट में लिखकर बताना है:
तुम्हारा भेजा हुआ आखिरी कोड काम नहीं कर रहा। स्क्रीन पूरी तरह काली है और कुछ भी नहीं घूम रहा। जाँच करो कि क्या तुमने OrbitControls सही तरीके से लोड किए हैं और क्या कैमरा ऑब्जेक्ट के अंदर नहीं है। इसे ठीक करने की कोशिश करो और मुझे पूरा सुधार किया हुआ वर्शन भेजो।
हो गया! प्रोजेक्ट को सेव करना
जैसे ही आप नतीजे से 100% संतुष्ट हों, CodePen से आखिरी काम करता हुआ कोड कॉपी करें। Windows पर Notepad या Mac पर TextEdit खोलें, कोड पेस्ट करें और फ़ाइल को 'muj_3D_web.html' नाम से सेव करें। बस! अब आपके पास अपनी खुद की 3D एप्लिकेशन है।