Three.js يشغل معظم تجارب الويب ثلاثية الأبعاد، ولم تعد بحاجة إلى ترميزها
يقوم Three.js بعرض أكثر من 70٪ من جميع المحتويات ثلاثية الأبعاد على الويب المفتوح، من صفحات منتجات Apple إلى ألعاب المتصفح المستقلة. حتى عام 2025، كان بناء أي شيء بها يعني تعلم WebGL، والمظللات، وموقع وثائق من 200 صفحة. الآن، تتيح المهارات الذكية على Vibe Skills للمطورين غير المبرمجين شحن مشهد Three.js عامل خلال عطلة نهاية الأسبوع - لا حاجة لدرجة رياضية، ولا جحر أرنب Stack Overflow.
يوضح هذا الدليل أي المهارات الذكية تنتج مخرجات Three.js حقيقية، وما يمكنك بناؤه فعليًا (بيئات الألعاب، عارضات المنتجات، المشاهد الرئيسية)، وكيفية الانتقال من "لدي فكرة" إلى "إنها مباشرة على نطاقي" دون لمس مُنشئ THREE.PerspectiveCamera يدويًا.
لماذا كان Three.js سابقًا بعيد المنال عن غير المبرمجين
Three.js هو الغلاف JavaScript لـ WebGL، واجهة برمجة تطبيقات الرسوميات ثلاثية الأبعاد منخفضة المستوى للمتصفح. لاستخدامه مباشرة، كان عليك فهم:
- رسوم بيانية للمشهد (الكاميرات، الأضواء، الشبكات، وكيفية تداخلها)
- المظللات (برامج الرأس والحافة المكتوبة بلغة GLSL)
- رياضيات الهندسة (المصفوفات، الرباعيات، مساحة العالم مقابل المساحة المحلية)
- ميزانيات الأداء (استدعاءات الرسم، عدد المضلعات، ذاكرة النسيج)
يستغرق برنامج تعليمي نموذجي "Hello Cube" 800 سطر من JavaScript قبل أن ترى شكلاً دوارًا. المشاهد الإنتاجية الحقيقية من وكالات مثل Active Theory أو Resn تعمل بـ 5000 إلى 15000 سطر مع خطوط أنابيب مظللة مخصصة.
حافظ هذا الباب على Three.js في أيدي متخصصي WebGL الذين يكسبون 120 دولارًا إلى 250 دولارًا في الساعة. يمكن للمصممين والمسوقين والمؤسسين والطلاب الإعجاب بالعمل ولكن لا يمكنهم شحنه أبدًا.
التحول في عام 2026: يمكن لأدوات الترميز الذكية مثل Cursor و Claude الآن قراءة موجز باللغة الإنجليزية العادية وإنتاج مشاهد react-three-fiber عاملة. تجمع المهارات الذكية هذا سير العمل في تثبيتات بنقرة واحدة - الهيكل، الإضاءة، عناصر التحكم في الكاميرا، تحسين الأداء، كل ذلك جاهز مسبقًا.
ما يمكنك بناؤه باستخدام Three.js + المهارات الذكية
يمكنك شحن خمسة أنواع مخرجات ملموسة دون الحاجة إلى كتابة WebGL يدويًا. كل منها له فئة Vibe Skills تجمع سير العمل.
| نوع المخرجات | مثال واقعي | وقت البناء (مع مهارة ذكية) | وقت البناء (من الصفر) |
|---|---|---|---|
| بيئة اللعبة | لعبة سباق في المتصفح، منصة مصغرة، غرفة هروب | 4-12 ساعات | 2-6 أسابيع |
| عارض المنتجات | حذاء رياضي بزاوية 360 درجة، مُخصص لسماعات الرأس، واجهة ساعة | 2-6 ساعات | 1-3 أسابيع |
| مشهد رئيسي ثلاثي الأبعاد | خلفية صفحة هبوط متحركة، منظور ثلاثي الأبعاد مدفوع بالتمرير | 3-8 ساعات | 1-2 أسابيع |
| إنفوجرافيك تفاعلي | أرض تدور، محرك مفكك، كرة بيانات | 4-10 ساعات | 2-4 أسابيع |
| عرض الويب AR / جرب ارتداءه | معاينة نظارات، وضع الغرفة، نموذج مقياس | 6-15 ساعات | 3-6 أسابيع |
الانضغاط تقريبًا 10x إلى 20x. تتولى المهارات الشفرة التأسيسية (إعداد المشهد، الأضواء، عناصر التحكم، التحجيم المتجاوب) حتى تركز على الاتجاه الإبداعي.
الفئتان الأكثر صلة من Vibe Skills هنا:
- ألعاب ثلاثية الأبعاد - ألعاب ثلاثية الأبعاد قابلة للعب بالكامل عبر Three.js (سباق، ألغاز، منصة مصغرة، نماذج أولية لألعاب FPS في المتصفح)
- ثلاثي الأبعاد تفاعلي - مُخصصات المنتجات، مشاهد رئيسية ثلاثية الأبعاد، مشاهد مدفوعة بالتمرير، تصورات البيانات
5 مهارات Three.js الذكية على Vibe Skills (لا يلزم WebGL)
تحتوي فئة الألعاب ثلاثية الأبعاد على Vibe Skills على مهارات مصممة خصيصًا لغير المبرمجين الذين يريدون مخرجات Three.js. كل منها يأتي مع شفرة تأسيسية لـ react-three-fiber، وخط أنابيب للأصول، وملف سير عمل جاهز لـ Cursor.
| نوع المهارة | ما ينتجه | الأفضل لـ |
|---|---|---|
| منشئ المشهد الرئيسي ثلاثي الأبعاد | مشهد Three.js مدفوع بالتمرير كمكون Next.js | صفحات الهبوط، مواقع المحافظ، الصفحات الرئيسية للوكالات |
| بدء تشغيل لعبة سباق في المتصفح | لعبة سباق كاملة مع مسار، فيزياء، تحكم | نماذج أولية للألعاب، حملات العلامة التجارية، هاكاثونات |
| مُخصص المنتجات | عارض بزاوية 360 درجة مع تبديل المواد / الألوان | متاجر التجارة الإلكترونية، إطلاق المنتجات، صفحات Kickstarter |
| حزمة بيئة الألعاب ثلاثية الأبعاد | مشاهد مُعدة مسبقًا (غابة، زنزانة، خيال علمي، حضري) | ألعاب مستقلة، مشاريع مدرسية، تجارب سردية |
| كشف شعار ثلاثي الأبعاد تفاعلي | شعار كنموذج ثلاثي الأبعاد مع رسوم متحركة للكاميرا | مقدمات الويب، أفلام العلامة التجارية، افتتاحيات المؤتمرات |
تصفح مهارات الألعاب ثلاثية الأبعاد على Vibe Skills لرؤية المعاينات الحية. كل مهارة تأتي مع عرض فيديو حتى ترى المخرجات الفعلية قبل التثبيت.
تعمل المخرجات في أي إطار عمل حديث: Next.js، Astro، Vite، HTML عادي. لا يوجد تقييد من مورد واحد.
بناء مشهد Three.js الأول الخاص بك في عطلة نهاية الأسبوع
إليك المسار العملي من الصفر إلى مشهد Three.js مباشر على نطاقك الخاص.
الخطوة 1: اختر المهارة المناسبة على Vibe Skills
ابدأ من /category/3d-games وقم بالتصفية حسب نوع المخرجات. إذا كنت تريد مشهدًا رئيسيًا، فاحصل على منشئ المشهد الرئيسي ثلاثي الأبعاد. إذا كنت تريد لعبة قابلة للعب، فاحصل على بدء تشغيل لعبة السباق في المتصفح أو حزمة بيئة الألعاب.
اقرأ المعاينة الحية، شاهد فيديو العرض، تحقق من توافق الإطار (معظمها يأتي مع react-three-fiber لـ Next.js / Vite). قم بتثبيت المهارة في Cursor أو Claude Code.
الخطوة 2: قم بتثبيت Cursor (أو Claude Code)
يمكن لكلا الأداتين تشغيل المهارات الذكية. Cursor أفضل للتحرير المرئي مع جزء معاينة الكود. Claude Code أفضل للعمل المستند إلى الطرفية وسير عمل الوكلاء. اختر واحدة - التثبيت في 5 دقائق.
الخطوة 3: إنشاء المشهد
افتح المشروع في المحرر الخاص بك، قم باستدعاء المهارة، صف ما تريده باللغة الإنجليزية العادية: "مشهد رئيسي للبلور الدوار مع خلفية كحلية داكنة، وتأثير تحويم، ودوران تلقائي بطيء." تقوم المهارة الذكية بإنشاء كود Three.js الكامل، بما في ذلك الأضواء والكاميرا وعناصر التحكم والتحجيم المتجاوب.
الخطوة 4: استبدل أصولك
أسقط نماذجك ثلاثية الأبعاد الخاصة (.glb أو .gltf من Sketchfab، Polyhaven، أو تصديرات Blender)، والنسيج (Polyhaven مجانًا CC0)، وألوان العلامة التجارية. تتضمن المهارة فتحات للأصول حتى لا تعيد هيكلة المشهد.
الخطوة 5: التحسين للجوال
تأتي المهارة مع بدائل للجوال: عدد مضلعات أقل، أضواء أبسط، معدلات إطارات محدودة على وحدات معالجة الرسومات الضعيفة. اختبر على هاتف حقيقي (محاكي الجوال Chrome DevTools يفوّت مشاكل وحدة معالجة الرسومات). استهدف 60 إطارًا في الثانية على iPhone عمره سنتان كخط أساس.
الخطوة 6: النشر
ادفع إلى Vercel أو Netlify. مشاهد Three.js هي JavaScript ثابتة - لا خادم، لا مثيل لوحدة معالجة الرسومات، لا استضافة خاصة. رابط مباشر في أقل من 60 ثانية.
تصفح مهارات Three.js على Vibe Skills →
أسئلة متكررة
هل أحتاج إلى معرفة WebGL لاستخدام مهارات AI Three.js؟
لا. المهارات الذكية على Vibe Skills تغلف WebGL بالكامل. تصف المشهد باللغة الإنجليزية العادية، وتنتج المهارة كود react-three-fiber عامل، وتقوم بتبديل أصولك الخاصة. أعمق ما ستصل إليه هو تحرير قيم الألوان ومسارات ملفات النماذج.
هل سيعمل المشهد بسلاسة على الهاتف المحمول؟
نعم، عندما تتضمن المهارة تحسينات للجوال. جميع منشئات مشاهد Vibe Skills ثلاثية الأبعاد تأتي مع بدائل لمستويات الأجهزة: شبكات ذات مضلعات منخفضة على الهواتف الضعيفة، ومعدلات إطارات محدودة على علامات التبويب في الخلفية، ونسيج يتم تحميله عند الحاجة. الهدف هو 60 إطارًا في الثانية على iPhone عمره سنتان. اختبر قبل الشحن.
هل يجب أن أستخدم Three.js الخام أو react-three-fiber؟
استخدم react-three-fiber. إنه غلاف React لـ Three.js ي جعل الكود تعريفيًا وأقصر بنسبة 40-60٪. تفضل مهارات Vibe Skills ثلاثية الأبعاد react-three-fiber لأنه يتكون بوضوح مع Next.js و Astro و Vite. Three.js الخام يستحق فقط محركات JavaScript النقية أو التحسين الشديد.
هل يمكنني استخدام نماذجي ثلاثية الأبعاد الخاصة من Blender أو Sketchfab؟
نعم. قم بالتصدير كـ .glb أو .gltf من Blender، أو قم بتنزيل ملفات .glb من Sketchfab و Polyhaven. أسقطها في مجلد الأصول، وأشر المهارة إلى الملف، وتم الأمر. تصفح مهارات المشهد ثلاثي الأبعاد لرؤية أمثلة على فتحات الأصول.
كم تكلف مهارة Three.js مقارنة بتوظيف مطور؟
يتقاضى عامل ويب مستقل 120 دولارًا إلى 250 دولارًا في الساعة، مع تشغيل مشهد رئيسي أساسي بـ 2000 دولار إلى 8000 دولار. تبدأ اشتراكات Vibe Skills من 39 دولارًا شهريًا وتتضمن مهارات ثلاثية الأبعاد غير محدودة. نقطة التعادل هي مشهد واحد.
هل يمكنني بناء لعبة كاملة بدون ترميز؟
نعم للنماذج الأولية، نعم إلى حد كبير للألعاب الجاهزة للشحن. يبدأ تشغيل لعبة السباق في المتصفح وحزمة بيئة الألعاب على Vibe Skills تشغيل الفيزياء والتحكم والتسجيل. تضيف مستويات وفن وصوت. تظل صقل الإنتاج (مثل اللعب الجماعي، وحالة الحفظ، والتحليلات) مستفيدة من مطور.
هل سيكون كود Three.js الذي تم إنشاؤه بواسطة الذكاء الاصطناعي فعالاً؟
إذا كانت المهارة تتضمن إعدادات مسبقة للأداء، نعم. ابحث عن المهارات التي تأتي مع ميزانيات استدعاءات الرسم، واجتثاث الكاميرا، والشبكات المضمنة، وضغط النسيج. تتضمن مهارات Vibe Skills ثلاثية الأبعاد الأربعة جميعها افتراضيًا. عادةً ما تكون المشاهد التي تم ترميزها يدويًا من المبتدئين أبطأ لأن التحسينات مدفونة في المستندات.
توقف عن مشاهدة عروض الويب ثلاثية الأبعاد. قم بشحن عروضك الخاصة.
كان Three.js هو حارس البوابة للوصول إلى ثلاثي الأبعاد على الويب لعقد من الزمان. كسرت المهارات الذكية البوابة. لم تعد بحاجة إلى معرفة WebGL، أو تعيين مطور، أو مدرج تعلم مدته 6 أشهر. تحتاج إلى وصف واضح للمشهد، ومهارة من Vibe Skills، وعطلة نهاية أسبوع.
المصممون يشحنون أبطالاً ثلاثيين الأبعاد. المؤسسون يشحنون عارضات المنتجات. الطلاب يشحنون ألعاب المتصفح. المسوقون يشحنون إنفوجرافيك تفاعلي. أصبح الشريط الآن هو الاتجاه الإبداعي، وليس بناء جملة GLSL.
تصفح مهارات Three.js وألعاب ثلاثية الأبعاد على Vibe Skills →
الويب يتجه نحو 3D. قم بتثبيت مهارة Three.js الأولى الخاصة بك على Vibe Skills وقم بشحن مشهد هذا الويكند.