واش ما كتعرفش تكتب الكود وقدرت دير أنيميشن 3D؟ الدليل الكامل ديال Remotion Skill + Three.js
باش تدير أنيميشن 3D، آش كان خاصك من قبل؟
خاصك الأول تتعلم Blender ولا Maya—الموديلينغ، التكسية، الإضاءة، ربط العظام، ضبط منحنيات الأنيميشن، وإعدادات الرندر—وما غاديش تخرج منها فشهور. والطريق ديال الكود أكثر تعقيداً: WebGL pipeline، وGLSL shaders، وتحويلات المصفوفات، وعشرات ديال API ديال Three.js—باش تبني مكعب كيدور خاصك تكتب 200 سطر.
ودابا؟
كتسطالي الأدوات، وكتكتب غير prompt واحد، والـAI كيساعدك يولّد مشهد ثلاثي الأبعاد. فـStudio كتعاين النتيجة مباشرة، ومنين تعجبك، كتدير screenshot، وكتصدّرها، وكتشاركها مع صحابك.
هاد المقال غادي يشرح ليك العملية كاملة—وما خاصكش تكتب حتى سطر كود.
1. ثلاثة ديال الحوايج بناو هاد "السحر"
Remotion Skill: كتشرح بفمك وهو كيكتب الكود
Remotion هو فالأصل framework مفتوح المصدر كيدير الفيديو بـReact (أكثر من 45K Star فـGitHub). ولكن بالنسبة ليك، المهم بصح هو Agent Skill ديالو—وهو plugin ديال AI خرج فـيناير 2026، وتسطالى أكثر من 25K مرة فالأسبوع الأول.
منين كتسطاليه، كتقدر توصف الأنيميشن اللي بغيتي بلغة طبيعية فـClaude Code، والـAI كيكتب الكود كامل بوحدو. فالجهة اليسرى كاينة نافذة ديال المعاينة المباشرة، وكتقدر تشوف النتيجة وتبدلها فكل وقت.
Three.js / WebGL: محرك 3D داخل المتصفح
Three.js كيغلف التعقيد ديال WebGL. ما خاصكش تعرف شنو هو vertex buffer ولا كيفاش كيتكمبايل shader—غير قول: "بغيت كرة معدنية كتدور تحت ضو سبوت"، وThree.js غادي يرسمها فالشاشة.
@remotion/three: دخل الـ3D للفيديو
فريق Remotion دار package مخصص باش يربط بيناتهم. كيخلي مشاهد 3D ديال Three.js متزامنة مع timeline ديال فيديو Remotion—شنو كيتترندر فكل frame هو بالضبط شنو غادي يتصدّر فـMP4.
النتيجة ديال هاد الثلاثة هي: كتقول للـAI جملة وحدة، وهو كيولد ليك فيديو أنيميشن 3D.
2. آش خاصك تحضّر؟ خمس دقايق وكملنا
الحوايج اللي محتاج بسيطة بزاف:
1. سطالي Node.js
دخل لـnodejs.org وحمّلو، وبقا غير كليك على "Next". هادي هي البيئة الأساسية باش يخدم Remotion.
2. صايب مشروع Remotion
حلّ التيرمينال (فـWindows كيتسمّى "Command Prompt" ولا PowerShell)، وكتب:
npx create-video@latestغادي يسولك شنو بغيتي تسمي المشروع، واختار template افتراضي. فدقيقة كتكون واجد.
3. سطالي Remotion Skill ودعم 3D
npx skills add remotion-dev/skills npm i three @react-three/fiber @remotion/three @types/threeجوج أوامر، كوبي كولي وكليكي Enter. من بعد، أي حاجة غادي تقولها فـClaude Code عندها علاقة بـRemotion، الـAI غادي يفعّل أوتوماتيكياً وضعية "مساعد الأنيميشن 3D".
4. شغّل المعاينة
npx remotion studioغادي تتحل نافذة فالمتصفح بوحدها. ومن دابا، أي مشهد 3D غادي تولّدو غادي يبان مباشرة فهاد النافذة.
3. المشكل الحقيقي: كيفاش "تقول" الصورة اللي فبالك؟
إعداد البيئة خدّام غير خمس دقايق. التحدي الحقيقي هنا: منين كتقول للـAI "بغيت أنيميشن 3D زوين بزاف"، كيبقى واحد الفرق كبير بين الفهم ديالو والصورة اللي فبالك.
الكلام بطبيعته ماشي وسيلة ديال 3D. وماشي الغلط ديالك.
هاد الطرق الأربعة غادي تعاونك تدوز هاد الهوة. وما محتاجاش لأي خلفية تقنية—المهم هو تعرف تتواصل مزيان.
الطريقة الأولى: عطِيه صورة مرجعية (الأكثر فعالية)
قلب على صورة قريبة من النتيجة اللي بغيتي—تصميم مفاهيمي، screenshot من فيلم، ولا screenshot ديال عمل ديال شي حد، كاملين صالحين. جرّ الصورة مباشرة لمربع الحوار ديال Claude Code:
"ديرها بهاد الستايل باستعمال Remotion + Three.js. بدّل الذهبي للأزرق، وخلي سطح الكرة أكثر نعومة."
صورة وحدة كتقدر توصل فالحين معلومات بحال: درجة انعكاس المعدن، كثافة الجزيئات، حدّة الضوء، الاتجاهات اللونية، ومركز التكوين. هاد الحوايج تقدر تكتب عليهم مئات الكلمات وما توضّحهمش مزيان.
الطريقة الثانية: بدّل بالتدريج، وما تقولش كلشي مرة وحدة
أكثر غلطة كيديروها المبتدئين: كيحطّو جميع الطلبات فـprompt واحد. والنتيجة غالباً كتكون كارثية.
الطريقة الصحيحة هي كل جولة تبدّل غير بُعد واحد:
الجملة الأولى: "دير كرة وخليها تدور بشوية حول محور Y." (شفنا الكرة كتدور فـStudio → نكمّلو.) الجملة الثانية: "بدّل الكرة لخامة زجاجية وشفافة. زيد مصدر ضوء جاي من الفوق على اليسار." (ولات كرة زجاجية → نكمّلو.) الجملة الثالثة: "زيد حلقة ديال جزيئات صغار دايرة بالكرة بحال حلقة النجوم. خاصها تلمع." الجملة الرابعة: "فالجوج ثواني اللولين الجزيئات يبانوا بشوية، فالثانية الثالثة يسرّعو فجأة، وفالأخير يتفرّقو."
أربع جولات ديال الحوار خدّاو عشر دقايق. فكل خطوة كتقدر تشوف النتيجة مباشرة، وإذا كان شي خطأ كتعرف فالحين فين وقع. أسرع بزاف من أنك تحبس على وصف مثالي ومن بعد تصلّح bugs نص نهار.
الطريقة الثالثة: جدول سريع لكلمات التأثيرات
ما محتاجش تتعلم برامج 3D ولا لغة shaders. ولكن حفظ شي كلمات ديال "التأثيرات" غادي يضاعف سرعة التواصل ثلاث مرات:
الإحساس اللي بغيتي｜قولها هكا
معدني، عاكس للضوء، بلمعة حادة｜"خليها بخامة معدنية وسطحها ناعم بزاف"
زجاجي، شفاف، فيه انكسار｜"خليها بحال كرة زجاجية، والضوء منين يدوز منها ينكسر"
كتلمع بحال النيون｜"زيد تأثير ديال الإضاءة بحال أضواء النيون"
غبار النجوم وجزيئات طايرة｜"زيد جزيئات حداها بحال الغبار فالفضاء"
أثر الضوء｜"زيد أثر ضوئي ورا مسار الحركة"
السطح كيتحرّك وكيتشوّه｜"خلي السطح متموّج بحال الماء"
منفوش ومصنفر｜"خليه بخامة مطفية ومصنّفرة"
الخلفية مغبّشة وفيها عمق الميدان｜"غبّش الخلفية شوية وركّز على الجسم اللي قدّام"
سبوت لايت وإضاءة داكنة｜"سلّط ضو سبوت من الفوق وخلي الجو مظلم شوية"
ستايل كرتوني ومسطّح｜"خليه بحال الرندر الكرتوني"
ما محتاجش تقول كلمات بحال meshPhysicalMaterial ولا transmission—غير قول "كرة زجاجية شفافة"، والـAI عارف كيفاش يديرها.
الطريقة الرابعة: خلّي الـAI هو اللي يسولك
إلى ما كانتش عندك حتى فكرة، قول مباشرة:
"بغيت ندير مشهد 3D بـRemotion + Three.js، ولكن ما عارفش شنو هي الإعدادات المناسبة. سولني الأول شي أسئلة، وأنا نختار من بين الأجوبة."
الـAI غادي يسولك: شحال من جسم؟ الضوء يكون دافئ ولا بارد؟ الإيقاع سريع ولا هادئ؟ شنو الإحساس ديال الخامة؟ الاختيار من بين الأجوبة ديما أسهل من أنك تعمّر الفراغات.
4. قوالب prompts ديال أنيميشن 3D—كوبي كولي مباشرة
هاد الـprompts تجرّبو فعلياً، كوبيهم وبدّل غير شي كلمات وغادي يخدمو. وكل واحد فيهم مبيّن شنو هو السيناريو المناسب ليه.
القالب الأول: ستايل عرض المنتجات (الأبسط)
دير أنيميشن ديال عرض منتج باستعمال Remotion + Three.js. حط [الجسم، مثلاً: تلفون/ساعة/كرة] فوسط الصورة بالضبط، والخامة ديالو هي [الخامة: معدن/زجاج/مصنّفرة]، واللون هو [اللون]. خليه يدور بشوية حول محور Y، وما تكونش السرعة كبيرة، بغيتها أنيقة. سلّط ضو نقطي من الفوق على اليسار باش يدير ظل ناعم. الخلفية بلون واحد، وتكون [لون الخلفية]. مدة الأنيميشن كاملة هي [المدة، مثلاً: 6 ثواني].مناسب لـ: عرض Logo، شكل المنتجات، وأنيميشن العلامات التجارية.
القالب الثاني: ستايل الكون والجزيئات
دير مشهد ديال الجزيئات باستعمال Remotion + Three.js. فوسط الصورة كاين [جسم]، وحاوديه بزاف ديال الجزيئات الصغيرة اللي كتلمع. لون الجزيئات هو [اللون]، وكتقرّب بشوية من الجسم اللي فالوسط على مسار حلزوني. الخلفية تكون بحال الفضاء المظلم. زيد شوية ديال تأثير التوهّج. المدة [المدة، مثلاً: 8 ثواني].مناسب لـ: مقدمات تقنية، تصور البيانات، وخلفيات المؤتمرات.
القالب الثالث: ستايل الضوء والخامات
دير عرض للضوء والخامات باستعمال Remotion + Three.js. واحد [الشكل الهندسي: كرة/مكعب/حلقة] مصنوع من [الخامة]، فيه [تأثير الخامة: انكسار شفاف/انعكاس معدني/توهّج نيون]. دوز شعاع ضوء من اليسار لليمين فوق السطح ديالو، وخلي لون الضوء [اللون] يدير [التأثير] فوق سطح الجسم. خلي الكاميرا تدور بشوية حول الجسم باش تبين تفاصيل الخامة. المدة [المدة].مناسب لـ: دراسة الخامات، الإلهام فالتصميم، والعروض المفاهيمية.
القالب الرابع: تحويل النص إلى 3D
حوّل واحد النص لتأثير 3D. النص هو [النص اللي بغيتي]، ورندروه بخط 3D بسُمك واضح. خليه يطلع فالاتجاه ديال المشاهد، وزيد شوية ديال [التأثير: توهّج/معدن/زجاج]. الخلفية هي [لون واحد/تدرّج/سماء مليئة بالنجوم]. المدة [المدة].مناسب لـ: أنيميشن العناوين، البوسترات، وبطاقات السوشيال ميديا.
القالب الخامس: الفن الهندسي التجريدي
دير أنيميشن هندسي تجريدي. وزّع عشوائياً شي [نوع الأشكال الهندسية] فالفضاء، وخلي الحجم وزاوية الدوران مختلفين فكل واحد. الخامة ديالهم هي [ستايل خامة موحّد]، ونظام الألوان هو [اللون1] + [اللون2] + [اللون3]. جميع الأجسام كيتحرّكو بشوية بطريقة [طريقة الحركة: طفو/دوران/نبض]، بحال منحوتة متحركة. زيد إضاءة ناعمة وتأثير خفيف ديال عمق الميدان. المدة [المدة].مناسب لـ: الإبداع الفني، الخلفيات، والفيديوهات المفاهيمية.
وتقدر تزيد هاد "التوابل"
زيد هاد العبارات من بعد أي قالب باش تتحكم فالتأثير بدقة:
زيد هاد الجملة｜التأثير
"زيد طبقة خفيفة ديال Bloom post-processing"｜الأجسام المضيئة كيولي عندها هالة منتشرة وحالمة أكثر
"خلّي الكاميرا تدور بشوية حول الجسم"｜حركة الكاميرا كتخلي اللقطة سينمائية أكثر من زاوية ثابتة
"استعمل تدرّج فالخلفية بلاصة لون واحد"｜تجنّب الرتابة
"زيد تأثير عمق الميدان وخلي الخلفية مغبّشة شوية"｜خلي التركيز أكثر على الجسم الرئيسي
"فبداية الأنيميشن زيد ease-in وفالنهاية ease-out"｜الإيقاع كيولي طبيعي أكثر وماشي مفاجئ
"بين الثانية 3 والثانية 5 كبّر الجسم ومن بعد صغّرو"｜كيعطي الأنيميشن إيقاع ديال "التنفّس"
5. من الـprompt للـscreenshot—workflow كامل
مزيان، دابا كتبتي prompt (ولا اخترتي واحد من القوالب اللي فوق)، آش تدير من بعد؟
Step 1: صيفط الـprompt لـClaude Code
حلّ dossier ديال مشروع Remotion ديالك، ولسّق الـprompt فـClaude Code. إلا كان Remotion Skill مسطالي، Claude غادي يتحوّل أوتوماتيكياً لـ"وضعية الأنيميشن".
Step 2: المعاينة
من بعد ما يولّد الـAI الكود، شغّل:
npx remotion studioغادي تبان المعاينة المباشرة فالمتصفح. جرّ الـtimeline باش تشوف تأثير كل frame.
Step 3: التعديل بالتدريج
شوف المعاينة وقول للـAI شنو ما عجبكش:
"الخلفية غامقة بزاف، ضوّيها شوية." "الجزيئات بزاف، نقصهم للنص." "السرعة ديال الدوران كبيرة، بطّأها بـ30%."
كل مرة كتبدّل فيها، Studio كيدير التحديث بوحدو. عاود عدّل حتى توصل للنتيجة اللي عجباك.
الخطوة 4: خد لقطة شاشة
منين تسالي التعديل، خد لقطة شاشة:
الطريقة A——لقطة لإطار واحد (موصى بها، والأسرع):
npx remotion still <اسم المكوّن> اسم-ملف-الإخراج.png --frame=رقم-الإطارمثلاً، إلا بغيتي تاخد لقطة فالثانية 3 (يعني الإطار 180 فـ 60fps):
npx remotion still My3DScene screenshot.png --frame=180تسنى بضع ثواني، وغادي تخرج لقطة شاشة بدقة 1080p. بدّل رقم الإطار وخد لقطة أخرى—هاد النوع ديال "لقطة إطار واحد" أسرع بزاف من تصيير الفيديو كامل.
الطريقة B——صدّر الفيديو كامل ومن بعد خد لقطة:
npx remotion render My3DScene out.mp4من بعد ما يكمل التصيير، وقف الفيديو فشي مشغل وخد لقطة شاشة. بطيئة ولكن كاملة—مناسبة إلا كنت محتاج بزاف ديال اللقطات المتتابعة.
الطريقة C——خد لقطة مباشرة من Studio:
فنافذة المعاينة ديال Studio، جرّ للمشهد اللي بغيتي، دير كليك بالزر الأيمن → حفظ لقطة الشاشة. أوضح طريقة، وبلا حتى أمر فسطّر الأوامر.
الخطوة 5: الاستعمال فالحسابات الرسمية / وسائل التواصل الاجتماعي
الصور اللي خدّيتي هي بصيغة PNG عادية وبدقة 1080p. جرّها مباشرة لمحرّر الحساب الرسمي ولا نشرها فالحالة ديالك.
إلا بغيتي بزاف ديال الصور، بدّل المعاملات فالنص التوجيهي (الألوان/الخامات/الزوايا)، وعاود الخطوات 1-4. تقدر تكمّل خمسة ديال التنويعات فـ عشر دقايق.
سادساً، بصراحة: شنو ما كتقدرش تدير هاد الطريقة
هضرنا قبل على شنو كتقدر تدير. دابا غادي نهضرو على شنو ما كتقدرش تدير—وفاش خاصك تحبس هاد الطريقة وتستعمل أداة أخرى.
الحدود الأساسية ديال WebGL
WebGL خدام فالمتصفح. والمتصفح ماشي محرّك احترافي للتصيير ثلاثي الأبعاد، حيث الأساس ديالو هو محرّك صفحات ويب كيمثّل خط معالجة GPU. وهاد الشي كيعني:
الجودة عندها سقف. تتبّع الأشعة ديال Cycles فـ Blender والتصيير الطيفي ديال Octane—WebGL ما كيقدر يدير حتى واحد فيهم. ما كايناش إضاءة عالمية حقيقية، وما كاينش تتبّع للأشعة، والخامات مبسّطة. الصورة "نقية" ولكن حتى "مصطنعة"، وما فيهاش داك الضوء غير المباشر الدقيق وتفاصيل الخامات اللي كيميزو محرّكات التصيير الحقيقية.
تعقيد المشهد محدود. بضعة آلاف ديال المثلثات كيبقاو خدامين بسلاسة، ولكن منين كتفوت المليون كيبدا التقطيع. والجزيئات منين كتفوت عشرة آلاف كيبدا التعليق. أما فبرامج 3D الاحترافية، فموديل شخصية فيه ملايين الوجوه أمر عادي.
ما كايناش محاكاة فيزيائية. حركة القماش، تناثر السوائل، وتصادم الأجسام الصلبة—حوايج كتديرهم بجوج نقرات فـ Blender، ولكن فـ WebGL خاصك تبنيهم من الصفر، وحتى النتيجة غادي تبقى مبسّطة.
التصيير بطيء. مشهد 3D معقّد مدته 30 ثانية يقدر يحتاج ساعات باش يتصيّر. ونفس النوع ديال المشهد فـ Blender باستعمال GPU يقدر ياخد غير بضع دقايق.
WebGPU مازال فطريقو
WebGPU هو المعيار الجاي، وأسرع من WebGL. ولكن المتصفحات ما بداتش الدعم الأولي ديالو حتى لمنتصف 2025—Firefox وSafari مازال كيلحقو، ودعم Three.js لـ WebGPU مازال تجريبي، والواجهة البرمجية تقدر مازال تتبدّل. استعمالو دابا فمشروع حقيقي مقامرة.
حتى الكود اللي كيكتبو الذكاء الاصطناعي فيه مشاكل
تحويل جملة وحدة لأنيميشن 3D حاجة مدهشة فعلاً، ولكن بزاف ديال المرات الكود اللي كيولّدو الذكاء الاصطناعي "كيبان صحيح، ولكن كيخدم بالغلط":
مشهد بسيط (عنصر واحد، مصدر ضوء واحد، وأنيميشن ديال الدوران): 80% كيدوز من أول مرة
تعقيد متوسط (عناصر متعددة، خامات متعددة، ونظام جزيئات): كيحتاج 2-3 جولات لإصلاح الأخطاء
مشهد معقّد (مظلّلات مخصّصة، وخط معالجة ما بعد التصيير): الكود اللي كيولّدو الذكاء الاصطناعي غالباً ما كيكونش صالح للاستعمال
فاش تبدّل الأداة؟
الاحتياج ديالك｜الأداة اللي خاصك تستعمل
صايب Logo / منتوج / أنيميشن ديال عرض البيانات｜Remotion + Three.js ✅
صايب صور مفاهيمية أو صور لوسائل التواصل الاجتماعي｜Remotion + Three.js ✅
صايب فيلم قصير فيه شخصيات ومشاهد｜Blender
بغيتي واقعية بحال التصاور｜Unreal Engine / Blender Cycles
سرعة التصيير شرط أساسي｜تصيير Blender باستعمال GPU
بعبارة بسيطة: Remotion + Three.js أداة "باش تخرج صورة زوينة بسرعة"، وماشي "محرّك تصيير بمستوى سينمائي". استعملها فاللقطات، والمفاهيم، والاستكشاف البصري—راه خفيفة وسريعة بزاف. ولكن ما تعوّلش عليها باش تدير مؤثرات بصرية ديال فيلم 《Dune》.
سابعاً، أحسن المصادر مجموعين كاملين
مصادر مرتبطة بـ Remotion
المصدر｜الشرح
التوثيق الرسمي｜مكتوب بشكل ممتاز، وبدا من هنا
remotion-template-three｜قالب رسمي للمبتدئين فـ 3D، خدام من بعد التثبيت مباشرة
Remotion Workshop｜دورة مجانية مدتها 52 دقيقة كيقدمها المؤسس بنفسو
Make Video With Code｜تطبيق عملي مجاني مدته 1.5 ساعة
ByteGrad: Remotion + Claude Code｜عرض عملي لكتابة Remotion بمساعدة الذكاء الاصطناعي
Claude-Code-Video-Toolkit｜حزمة أدوات كاملة—مكوّنات + انتقالات + نظام ديال الثيمات
remotion-best-practices 3D｜دليل شامل لتفادي مشاكل 3D والأخطاء الشائعة
Three.js / WebGL
المصدر｜الشرح
التوثيق الرسمي ديال Three.js｜أكثر من 300 مثال قابل للتشغيل
WebGL2 & GLSL Primer｜من الصفر حتى الاحتراف فـ GLSL، مع فهم منظم للمبادئ
Three.js Bootcamp｜دورة مدتها 20 ساعة، فيها مشروع لعبة 3D (تحديث 2026.6)
Three.js Journey｜الدورة الكلاسيكية ديال Bruno Simon
مدخل وتطبيق عملي لـ WebGL+Three.js｜دورة منهجية بالصينية من 18 فصل
مشاريع مفتوحة المصدر—تعلّم مباشرة
المشروع｜علاش كننصحو به
aimees-papercraft-world.com｜الكود والموديلات ديال Blender مفتوحين كاملين، وأحسن مادة للتعلّم
card-3d-animation｜أصغر مثال على Remotion + 3D، مناسب لأول تجربة
iMoss｜500 ألف عشبة + مظلّلات مخصّصة، والنتيجة مبهرة
siri-glsl｜إعادة تنفيذ لغة تصميم Apple باستعمال المظلّلات فقط
مواقع للإلهام—شوف فين كاين السقف
العمل｜الكلمات المفتاحية
bruno-simon.com｜المعيار المرجعي فالأعمال التفاعلية بـ Three.js
samsy.ninja｜سايبر بانك بـ WebGPU
jordan-breton.com｜جزر عائمة ثلاثية الأبعاد، FWA Site of the Day
bilal.show｜حكي 3D كيتحرك مع التمرير
خلاصة
فجملة وحدة، هادي هي خلاصة المقال اللي قريتي دابا:
فالماضي، باش تدير أنيميشن 3D كان خاصك تتعلّم Blender، والتصيير، والبرمجة. دابا غير محتاج Node.js، وجملة توجيهية، وصورة مرجعية وحدة.
لقا أولاً صورة مرجعية 3D عجباتك، اختار جملة توجيهية من القالب وعدّلها شوية، ومن بعد صيفطها لـ Claude Code. منين تشوف النتيجة فـ Studio، خد لقطة وحفظها. من بعد عشر دقايق غادي تكون عندك صورة 3D نطقتي بها وخرجتيها للوجود.