रियल‑टाइम प्लान: Gemini के ज़रिए 3D वेब
prompt जनरेटरों को भूल जाइए। यहाँ एक पूरा इंटरैक्टिव plán है, कदम दर कदम। खाली चैट से लेकर इंटरैक्टिव 3D zážitek तक – सिर्फ real‑time में umělou inteligencí के साथ बातचीत की मदद से।
कदम 1: परिवेश की तैयारी
आपको अपने कंप्यूटर पर कुछ भी इंस्टॉल करने की ज़रूरत नहीं है। पूरा प्रक्रिया पूरी तरह ब्राउज़र में ही चलेगी। सबसे तेज़ इटरशन के लिए दो पैनल बगल‑बगल खोलें:
- मुफ़्त Google Gemini (gemini.google.com) खोलें।
- ऑनलाइन कोड एडिटर CodePen.io या PlayCode.io खोलें। यहाँ हम बिना HTML soubory बनाए और ukládání किए तुरंत vygenerovaný kód testovat budeme.
कदम 2: शुरुआती मास्टर‑प्रॉम्प्ट
पहला prompt सबसे महत्वपूर्ण है। यह Gemini के लिए सीमाएँ तय करता है और तकनीकी základ सेट करता है (Three.js CDN से, सब कुछ एक ही soubor में)। इस पाठ को zkopírujte करें और Gemini में vložte करें:
तुम WebGL और Three.js knihovna के विशेषज्ञ हो। तुम्हारा काम एक पूरी HTML kód (CSS और JS सहित अंदर ही) लिखना है, जो funkční 3D scéna बनाए। Požadavky: 1. बीच में एक घूमता हुआ 3D objekt (TorusKnot या Icosahedron) vytvoř करो। 2. Three.js और OrbitControls को CDN odkaz (unpkg nebo cdnjs) के ज़रिए script टैग में import करो। 3. यह 'Single file' होना चाहिए – सब कुछ एक ही kód के टुकड़े में, žádné import maps नहीं। 4. externí modely (GLTF) या textury (JPG/PNG) का उपयोग मत करो। सब कुछ procedurálně kódu में vytvoř करो (MeshStandardMaterial, světla, barvy)। 5. bodová světla (PointLight) और हल्की छायाएँ जोड़ो। 6. pozadí को बहुत गहरे रंग पर nastav करो।
कदम 3: चलाना और जाँच करना
जैसे ही Gemini kód vygeneruje, kód rámeček के दाईं ऊपर के हिस्से से उसे zkopírujte करें। दूसरे panel (जैसे CodePen) पर जाएँ और पूरा kód केवल HTML kolonka में vložte करें (CSS और JS kolonky खाली छोड़ें, हमारे kódu में सब कुछ पहले से है)।
टिप: आपको तुरंत घूमता हुआ 3D objekt दिखाई देगा। उस पर myší से kliknout कर के खींच कर देखें – OrbitControls की मदद से आप उसे घुमा सकते हैं!
कदम 4: रियल‑टाइम इटरेशन
अब असली real‑time काम शुरू होता है। Gemini पर वापस जाएँ। नया kód लिखने या उसे पुराना kód भेजने की ज़रूरत नहीं है (उसे वह pamatuje si)। बस उसके साथ चैट करते रहें और धीरे‑धीरे požadavky जोड़ते जाएँ। एक‑एक करके ये zprávy vyzkoušejte करें:
यह बहुत बढ़िया है। अब objekt के materiál को सॉलिड barvy से बदल कर चमकती हुई 'Wireframe' (síťový model) में कर दो, जो neonově नीली और गुलाबी barvy में हो।
बहुत अच्छा। अब scéna के pozadí में धीरे‑धीरे घूमता हुआ částicový systém (Points और PointsMaterial) जोड़ो, जो vesmíru में hvězdों का simulovat करेगा।
उत्कृष्ट। और अब ऐसा करो कि जब मैं myší हिलाऊँ, तो světel की barvy obrazovka पर kurzor की pozice के अनुसार धीरे‑धीरे बदलने लगें।
कदम 5: समस्या समाधान (Debugging)
जब आप real‑time में kód upravujete करते हैं, तो AI कभी‑कभी गलती कर देती है और CodePen पर आपको सिर्फ काली या सफेद obrazovka दिखाई देगी। आपको प्रोग्रामování znát की ज़रूरत नहीं है, बस problém को चैट में popsat कर दें:
तुम्हारा poslední भेजा हुआ kód काम नहीं कर रहा। obrazovka पूरी तरह काली है और कुछ भी नहीं घूम रहा। जाँच करो कि क्या तुमने OrbitControls सही तरह načetl किया है और क्या kamera objekt के अंदर नहीं है। इसे ठीक करने की कोशिश करो और मुझे पूरी opravená verze भेजो।
हो गया! प्रोजेक्ट सहेजना
जब आप výsledkem से 100% संतुष्ट हों, तो CodePen से अंतिम funkční kód zkopírujte करें। Windows पर Poznámkový blok (Notepad) या Mac पर TextEdit खोलें, kód vložte करें और soubor को 'muj_3D_web.html' के रूप में uložit करें। बस! अब आपके पास अपनी खुद की 3D aplikace है।