Three.js
ثلاثي الأبعاد
الأداة 3 من 10وش هي؟
أشهر مكتبة للثلاثي الأبعاد في المتصفح، وهي اللي ورا مواقع كثيرة فيها مجسمات تلف وأنت تتصفح. الإضاءة والكاميرا والألوان كلها أرقام في الكود: كلمة وحدة تغيّر الضوء، ورقم واحد يقرّب الكاميرا.
متى تستخدمها؟
- مجسمات بسيطة: مكعبات، زجاج، شعارات من أشكال هندسية
- كاميرا تلف حول شي، أو شي يتفكك ويرجع
- كرة أرضية، خرائط، وخطوط بين المدن
كيف تشغّلها
- افتح Claude Code في مجلد جديد، أو محادثة جديدة في شات Claude العادي.
- الصق واحد من البرومبتات اللي تحت.
- Claude يثبّت الأداة بنفسه، يكتب الكود، ويرندر لك MP4.
أمر التثبيت اللي يشغّله Claude (للي يحب يعرف):
npm i three
البرومبتات الثلاث
غيّر اللي بين الأقواس [ ] بفكرتك، وبعدها الصقه في Claude Code أو شات Claude العادي.
1مجسم ثلاثي الأبعاد يلف ويتفكك ويرجع
سوّ لي بـ Three.js مشهد [المدة، مثلاً 12] ثانية 1920×1080: [وصف المجسم، مثلاً مكعّب زجاجي فيه عينين مضيئة] يطفو فوق قاعدة دائرية مضيئة. الكاميرا تلف حوله ببطء، وبالنص يتفكك قطع ويرجع يتجمع. خامة [زجاج / معدن / بلاستيك] بإضاءة ناعمة على خلفية [لون الخلفية]. رندر كل فريم وطلّع MP4.
2نفس المشهد بضوء ثاني وكاميرا أقرب
في نفس مشهد Three.js: خلّ لون الضوء وبُعد الكاميرا متغيرين في أول الملف. طلّع نسخة بضوء [اللون الأول]، ونسخة بضوء [اللون الثاني] والكاميرا أقرب، وحط فوق كل نسخة شارة صغيرة تقول وش تغيّر. طلّع MP4.
3كرة أرضية وخطوط بين أماكن تختارها
سوّ بـ Three.js كرة أرضية من نقاط مضيئة تلف ببطء على خلفية داكنة، وخطوط منحنية تطير بين [المدن أو الدول اللي تبيها] وتنرسم وحدة وحدة، مع نقطة تلمع عند كل مكان توصله الخطوط، وتحت عنوان «[العنوان]». [المدة] ثواني، 1920×1080، خط Cairo، طلّع MP4.
مثال كامل: مقطع «Claude يحاول يشحن الجوال»
أنيميشن بروبوتين وقصة 20 ثانية، كله Three.js: 7 برومتات وملف المشهد الجاهز.
⚠️ خذ بالك
- Claude يبني لك أشكال بسيطة ممتازة، لكن لو تبي منتج حقيقي بتفاصيله (جوال، سيارة) تحتاج مجسّم جاهز له (ملف glb).
السعر والرخصة
مجانية ومفتوحة المصدر برخصة MIT.
روابط رسمية
شفتها في الحلقة
تبي تشوف الأداة وهي تشتغل؟ الحلقة فيها 3 أمثلة حقيقية لكل أداة.