خطة الزمن الحقيقي: مواقع 3D عبر Gemini
انسَ مولدات البرومبت الجاهزة. إليك خطة تفاعلية كاملة، خطوة بخطوة. من دردشة فارغة إلى تجربة ثلاثية الأبعاد تفاعلية – فقط باستخدام محادثة مع الذكاء الاصطناعي في الزمن الحقيقي.
الخطوة 1: تحضير البيئة
لا تحتاج إلى تثبيت أي شيء على جهازك. ستجري العملية كاملة في المتصفح فقط. لأسرع تكرار، افتح لوحين بجانب بعضهما البعض:
- افتح خدمة Google Gemini المجانية (gemini.google.com).
- افتح محرر كود على الإنترنت مثل CodePen.io أو PlayCode.io. هنا سنختبر الكود المُولّد فورًا بدون الحاجة إلى إنشاء وحفظ ملفات HTML.
الخطوة 2: برومبت البدء الرئيسي
أول برومبت هو الأهم. يحدد الحدود لـ Gemini ويضبط الأساس التقني (Three.js من CDN، وكل شيء في ملف واحد). انسخ هذا النص وألصقه في Gemini:
أنت خبير في WebGL ومكتبة Three.js. مهمتك هي كتابة كود HTML كامل (بما في ذلك CSS و JS داخله) لمشهد ثلاثي الأبعاد يعمل بشكل كامل. المتطلبات: 1. أنشئ في المنتصف جسمًا ثلاثي الأبعاد دوّارًا (TorusKnot أو Icosahedron). 2. استورد Three.js و OrbitControls عبر رابط CDN (من unpkg أو cdnjs) داخل وسم script. 3. يجب أن يكون الملف "واحدًا فقط" – كل شيء في قطعة كود واحدة، بدون import maps. 4. لا تستخدم نماذج خارجية (GLTF) أو خامات (JPG/PNG). أنشئ كل شيء إجرائيًا في الكود (MeshStandardMaterial، الإضاءات، الألوان). 5. أضف أضواء نقطية (PointLight) وظلالًا خفيفة. 6. اجعل الخلفية بلون داكن جدًا.
الخطوة 3: التشغيل والتحقق
حالما يولّد Gemini الكود، انسخه من الزاوية اليمنى العليا في مربع الكود. انتقل إلى اللوح الثاني (مثلًا CodePen) وألصق الكود كاملًا فقط في خانة HTML (اترك خانات CSS و JS فارغة، فالكود لدينا يحتوي على كل شيء بداخله).
نصيحة: سترى فورًا جسمًا ثلاثي الأبعاد يدور. جرّب النقر عليه بالفأرة والسحب – بفضل OrbitControls يمكنك تدويره!
الخطوة 4: التكرار في الزمن الحقيقي
الآن تبدأ المرحلة الفعلية في الزمن الحقيقي. ارجع إلى Gemini. لا داعي لكتابة كود جديد أو إرسال القديم له (فهو يتذكره). يكفي أن تتحاور معه وتضيف المتطلبات تدريجيًا. جرّب هذه الرسائل واحدة تلو الأخرى:
هذا رائع. غيّر الآن مادة الجسم من لون ممتلئ إلى نموذج شبكي مضيء "Wireframe" بألوان نيون زرقاء وزهرية.
ممتاز. أضف الآن في خلفية المشهد نظام جسيمات يدور ببطء (Points و PointsMaterial) ليحاكي النجوم في الفضاء.
رائع. والآن اجعل الأمر بحيث عندما أحرك الفأرة، تبدأ ألوان الأضواء بالتغيّر بسلاسة وفقًا لموضع المؤشر على الشاشة.
الخطوة 5: حل المشكلات (تصحيح الأخطاء)
عند تعديل الكود في الزمن الحقيقي، قد ترتكب الذكاء الاصطناعي أحيانًا خطأً، وسترى على CodePen شاشة سوداء أو بيضاء فقط. لا تحتاج إلى معرفة البرمجة، يكفي أن تصف المشكلة في الدردشة:
الكود الأخير الذي أرسلته لا يعمل. الشاشة سوداء تمامًا ولا شيء يدور. تحقق مما إذا كنت قد حمّلت OrbitControls بشكل صحيح، وتأكد من أن الكاميرا ليست داخل الجسم. حاول إصلاح ذلك وأرسل لي النسخة الكاملة المصححة.
تم! حفظ المشروع
حالما تصبح راضيًا بنسبة 100% عن النتيجة، انسخ آخر كود يعمل من CodePen. على Windows افتح المفكرة (Notepad) أو على Mac افتح TextEdit، ألصق الكود واحفظ الملف باسم "muj_3D_web.html". تم! أصبح لديك تطبيق ثلاثي الأبعاد خاص بك.