مشاهد ثلاثية الأبعاد لحظية تعمل على الأجهزة الفعلية
Three.js مكتبة ناضجة ومفتوحة المصدر للرسوم ثلاثية الأبعاد في المتصفح، وتتيح لنا React Three Fiber البناء بها في صورة مكونات داخل تطبيق React. نستخدمهما لإنشاء أدوات تخصيص المنتجات، وصالات العرض، والأقسام الافتتاحية ثلاثية الأبعاد، وعرض البيانات، ويشمل عملنا إعداد النماذج، والمواد والإضاءة، والتفاعل، والفيزياء، والمعالجة اللاحقة للصورة، والواجهة المحيطة بمساحة العرض.
اختر Three.js حين تقوم التجربة على النماذج والمواد والكاميرات والأضواء، وهذا حال معظم أدوات التخصيص وصالات العرض. فبنية المشهد ومحمّلات الملفات والمواد القائمة على الفيزياء توفّر جهداً كان WebGL الخام سينفقه على الأعمال التأسيسية. ولا ننزل إلى مستوى أدنى إلا حين يحتاج المشروع إلى محرك عرض مخصص أو حزمة شيفرة صغيرة على نحو غير معتاد، ونخبرك بالحالة التي تنطبق قبل بدء العمل.
بنية المشهد
مشاهد مبنية في صورة مكونات React Three Fiber، بحالة واضحة، وتحميل عند الحاجة، وتحرير للموارد غير المستخدمة، فتندمج الميزات ثلاثية الأبعاد بسلاسة في تطبيق React القائم لديك.
مسار النماذج والأصول
ننظّف نماذج CAD أو نماذج المصممين في Blender، ونحوّلها إلى glTF، ثم نضغطها باستخدام Draco أو Meshopt وخامات KTX2، لتبقى ملفات التنزيل صغيرة والتحميل سريعاً.
المواد والإضاءة
مواد قائمة على الفيزياء، وخرائط بيئة، وإضاءة محسوبة مسبقاً أو فورية، نضبطها لتظهر المنتجات بدقة، بما في ذلك الأسطح الصعبة مثل الزجاج والمعدن والقماش.
التفاعل والفيزياء
كاميرات مدارية وموجَّهة، وتحديد العناصر بإسقاط الأشعة، وأدوات السحب، وشروح توضيحية، وفيزياء Rapier حين تحتاج الأجسام إلى التصادم أو التراص أو الاستجابة للمستخدم.
المظلّلات والمعالجة اللاحقة
مواد GLSL مخصصة ومؤثرات مثل التوهج وعمق الميدان والإظلال المحيطي، نطبّقها بانتقائية حتى لا تكلّفك جودة الصورة معدل الإطارات.
ضبط الأداء
تقليل استدعاءات الرسم، وتكرار الكائنات، ومستويات التفاصيل، وميزانيات الخامات، والرسم عند الحاجة فقط، مع قياس الأداء على هواتف متوسطة الفئة، وضبطه لكل جهاز عبر مستويات للجودة.
ما تتسلّمه منّا
- شيفرة Three.js أو R3F جاهزة للإنتاج
- نماذج glTF وخامات محسَّنة
- مكتبة مظلّلات ومواد مخصصة
- منطق حالة أداة التخصيص أو المشهد
- مستويات جودة للأجهزة وبدائل احتياطية
- تقرير قياس الأداء والميزانية
- برامج مسار الأصول وتوثيقها
- وصول كامل إلى المستودع وبيئة النشر
طريقة عملنا
- 01
تحديد المشهد
نتفق على ما يجب أن يراه المستخدم ويفعله، ونراجع نماذجك أو بيانات CAD، ونحدد الأجهزة المستهدفة وميزانية الإطار، ونبني نموذجاً تقنياً أولياً يختبر جدوى أكثر الأجزاء مخاطرة.
- 02
إعداد الأصول
نعيد بناء طوبولوجيا النماذج عند الحاجة، ونفرد أسطحها، ونكسوها بالخامات، ونصدّرها إلى glTF مع الضغط. ونفحص كل أصل داخل المشهد من حيث المقياس ودقة المواد وحجم الملف قبل قبوله.
- 03
البناء والإضاءة
نبني المشهد والكاميرات والتفاعل والواجهة في React Three Fiber، ثم نضبط المواد والإضاءة والمؤثرات. وطوال العمل تراجع نسخاً عاملة عبر رابط معاينة، على أجهزتك أنت.
- 04
القياس والتسليم
نقيس الأداء على هواتف وأجهزة محمولة فعلية، ونخفض استدعاءات الرسم واستهلاك الذاكرة، ونضيف مستويات للجودة وبديلاً للأجهزة غير المدعومة، ثم ندمج المشهد في موقعك أو تطبيقك.
التقنيات التي نستخدمها
| المجال | التقنيات |
|---|---|
| الأساس | Three.js، React Three Fiber، Drei، TypeScript |
| العرض | WebGL 2، WebGPU، GLSL، Three.js Shading Language |
| الحركة | GSAP، Theatre.js، Rapier، Lenis |
| الأصول | Blender، glTF، Draco، KTX2، glTF Transform |
عملاؤك يريدون رؤية منتجك وتخصيصه عبر الإنترنت
لا تستطيع الصور والفيديو إظهار كل لون ومادة وخيار تبيعه. تريد عرضاً ثلاثي الأبعاد يديره العميل ويخصصه في المتصفح، مرتبطاً بكتالوجك وأسعارك، يُحمَّل بسرعة ويعمل جيداً حتى على هاتف عادي.
- أدوات ثلاثية الأبعاد لتخصيص المنتجات
- صالات عرض وجولات افتراضية
- عروض بيانات تفاعلية ثلاثية الأبعاد
- أقسام افتتاحية ثلاثية الأبعاد للمواقع
- التصور المعماري والعقاري
- إضافة الأبعاد الثلاثة إلى تطبيقات React
أسئلة شائعة
متى نستخدم Three.js بدلاً من WebGL أو WebGPU مباشرة؟
استخدم Three.js حين يتكون مشهدك من نماذج ومواد وأضواء وكاميرات. فهي تتولى محمّلات الملفات وبنية المشهد والعرض القائم على الفيزياء، فيذهب الجهد إلى منتجك لا إلى الأساسات. أما WebGL أو WebGPU مباشرة فيناسبان مسار عرض مخصصاً، أو حسابات ثقيلة على معالج الرسوم (GPU)، أو مؤثراً مستقلاً صغيراً جداً. وكثير من المشاريع تجمع بين الطريقتين، بمظلّلات مخصصة داخل مشهد Three.js.
هل نستخدم React Three Fiber أم Three.js وحدها؟
إذا كان موقعك أو تطبيقك مبنياً أصلاً على React، فإن React Three Fiber يكون في الغالب الأنسب. إذ يصبح المشهد مكونات تتشارك الحالة مع بقية الواجهة، وهذا يبسّط أدوات التخصيص وكل ما تحركه بيانات التطبيق. أما Three.js وحدها فتناسب البيئات التي لا تعتمد React، والأدوات القابلة للتضمين، والحالات التي لا تريد فيها الاعتماد على إطار عمل. وأداء العرض متقارب حين يُكتب كلاهما بعناية.
هل يمكنكم العمل من ملفات CAD أو النماذج ثلاثية الأبعاد الموجودة لدينا؟
نعم. ملفات CAD المصدَّرة تكون عادةً أثقل بكثير مما يحتمله المتصفح، لذلك نحوّلها ونبسّطها، ونعيد بناء الطوبولوجيا عند الحاجة، وننشئ مواد وخامات تناسب العرض الفوري. أما النماذج المعدّة للعرض المسبق أو للألعاب فتحتاج إلى عمل أقل، لكننا نحسّنها ونضغطها أيضاً. وإن لم تكن لديك نماذج، يمكننا إنتاجها من صور مرجعية أو رسومات أو مواصفات المنتج.
كيف تحافظون على سرعة مشاهد Three.js على الأجهزة المحمولة؟
نحدد ميزانية الإطار والأجهزة المستهدفة في البداية، ونقيس الأداء بالنسبة إليها طوال العمل. وأهم الأساليب ضغط الأشكال الهندسية والخامات، وتقليل استدعاءات الرسم بتكرار الكائنات ودمج الشبكات، ومستويات التفاصيل، وتحديد سقف لكثافة البكسل، وعدم الرسم إلا حين يتغير شيء. ويكتشف المشهد قدرة الجهاز ويختار مستوى الجودة، وتحصل الأجهزة القديمة جداً على صورة ثابتة بديلة.
هل يستطيع مطوّرونا صيانة الشيفرة ثلاثية الأبعاد بعد التسليم؟
هذا هو المقصود. فالشيفرة محددة الأنواع، ومنظمة في مكونات، وموثّقة، بما في ذلك طريقة إضافة نسخة من منتج، أو استبدال نموذج، أو تعديل مادة، دون المساس بمحرك العرض. وتتسلّم المستودع وبرامج مسار الأصول وملفات النماذج المصدرية. ونعرّف مطوّريك بالشيفرة عند التسليم، ونبقى متاحين لميزات جديدة إن أردت.