تم قفل الوصول إلى التطبيق
للحصول على الوصول إلى هذا الدرس ثلاثي الأبعاد، يجب أولاً الاشتراك في قناتنا على يوتيوب.
خطة الزمن الفعلي: مواقع 3D عبر Gemini
انسَ مولّدات البرومبت. إليك خطة تفاعلية كاملة، خطوة بخطوة. من محادثة فارغة وصولاً إلى تجربة ثلاثية الأبعاد تفاعلية – فقط باستخدام محادثة مع الذكاء الاصطناعي في الزمن الفعلي.
الخطوة 1: إعداد البيئة
لا تحتاج إلى تثبيت أي شيء على جهازك. ستجري العملية كاملة داخل المتصفح. لأسرع تكرار، افتح لسانين جنبًا إلى جنب:
- افتح خدمة Google Gemini المجانية (gemini.google.com).
- افتح محرر كود إلكتروني مثل CodePen.io أو PlayCode.io. سنقوم هنا باختبار الكود المُولَّد فورًا بدون الحاجة لإنشاء وحفظ ملفات HTML.
الخطوة 2: برومبت افتتاحي رئيسي (Master-Prompt)
أول برومبت هو الأهم. يحدد الحدود لـ 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: حل المشكلات (Debugging)
عند تعديل الكود في الزمن الفعلي، قد ترتكب الذكاء الاصطناعي أحيانًا خطأ، فترى في CodePen شاشة سوداء أو بيضاء فقط. لا تحتاج لمعرفة البرمجة، يكفي أن تصف المشكلة في الدردشة:
الكود الأخير الذي أرسلته لا يعمل. الشاشة سوداء تمامًا ولا شيء يدور. تحقق مما إذا كنت قد حمّلت OrbitControls بشكل صحيح، وهل الكاميرا ليست داخل الجسم. حاول إصلاح ذلك وأرسل لي النسخة الكاملة المصححة.
تم! حفظ المشروع
عندما تكون راضيًا عن النتيجة بنسبة 100٪، انسخ آخر كود يعمل من CodePen. في ويندوز افتح المفكرة (Notepad) أو على ماك TextEdit، الصق الكود واحفظ الملف باسم "muj_3D_web.html". تم! أصبح لديك تطبيق ثلاثي الأبعاد خاص بك.