مواقع كاملة تُبنى حول قصة ثلاثية الأبعاد
الموقع ثلاثي الأبعاد موقع كامل، فيه صفحات وتنقل وإدارة محتوى وتحليلات، ويحمل القصة فيه مشهد يعمل في الوقت الفعلي. نتولى الفكرة والتوجيه الفني والنمذجة وتصميم الحركة مع التمرير والتطوير معاً. ويشمل العمل عادةً كشف المنتج مع التمرير، ومرئيات الجسيمات والمرئيات المولّدة برمجياً، والنصوص ثلاثية الأبعاد، ومشاهد افتتاحية تستجيب للزائر، وكلها مرتبطة بنص الصفحة.
اختر هذه الخدمة حين تحتاج إلى الموقع كله، لا إلى مكوّن ثلاثي الأبعاد لموقع قائم. وهي تناسب المواقع الرئيسية للعلامات التجارية، وعمليات الإطلاق، والمواقع التسويقية التي يصعب فيها شرح المنتج بصور مسطحة. نرسم القصة المصورة للتمرير قبل البناء، ونُبقي النص في HTML حقيقي لمحركات البحث وقارئات الشاشة، ونصمم نسخة أخف للأجهزة التي لا تستطيع تشغيل المشهد.
الفكرة والقصة المصورة
قصة مصورة تتبع التمرير خطوة خطوة، تبيّن ما يفعله المشهد في كل قسم والرسالة التي يخدمها، ونتفق عليها معك قبل بدء النمذجة أو التطوير.
مشاهد تتحرك مع التمرير
حركة الكاميرا وتحوّلات الأجسام وتغيّر المواد مرتبطة بموضع التمرير عبر خطوط GSAP الزمنية، فيتقدم المشهد ومحتوى الصفحة معاً بإيقاع الزائر.
المشاهد الافتتاحية
مشاهد افتتاحية تفاعلية من منتجك أو شعارك أو شكل تجريدي، مصممة لتُحمَّل تدريجياً، فيرى الزائر شيئاً ذا معنى بينما تصل بقية الملفات.
الجسيمات والمرئيات المولّدة برمجياً
أنظمة جسيمات، وأشكال مولّدة، وخلفيات تعتمد على المظللات (Shaders)، تمنح العلامة التجارية بصمة بصرية خاصة دون الاعتماد على نماذج ثقيلة التحميل.
بناء الموقع ونظام إدارة المحتوى
نبني الصفحات المحيطة بالمشهد بـ Next.js أو Astro مع نظام إدارة محتوى (CMS) مستقل عن الواجهة، فيعدّل فريقك النصوص ودراسات الحالة والبيانات الوصفية دون لمس شيفرة المشهد.
البدائل وإمكانية الوصول
بدائل لمن يفضّل تقليل الحركة، وتنقل بلوحة المفاتيح، ومحتوى HTML دلالي، ونسخة ثابتة أو بالفيديو للأجهزة الضعيفة، فيبقى المحتوى في متناول كل زائر.
ما تتسلمه منا
- موقع كامل جاهز للتشغيل
- القصة المصورة للتمرير والتوجيه الفني
- نماذج وخامات ثلاثية الأبعاد محسّنة
- الشيفرة المصدرية للمشاهد والحركة
- نظام إدارة محتوى مع توثيق للمحررين
- بدائل لتقليل الحركة وللأجهزة الضعيفة
- البيانات الوصفية لمحركات البحث وإعداد التحليلات
- صلاحيات الوصول إلى المستودع والاستضافة والنطاق
طريقة عملنا
- 01
الفكرة
نحدد القصة التي يجب أن يرويها الموقع، ونجمع المراجع، ونعرض التوجيه الفني في لقطات تبيّن الأسلوب. وتعتمد الاتجاه البصري وهيكل الصفحات قبل بدء الإنتاج.
- 02
القصة المصورة
لكل قسم إطار يبيّن النص وحالة المشهد والانتقال إلى القسم التالي. يتبعه نموذج أولي متحرك مبدئي، فنحكم على الإيقاع في المتصفح لا على الشرائح.
- 03
الإنتاج والبناء
ننتج النماذج والمواد والمظللات بينما نطوّر الموقع ونظام إدارة المحتوى وحركة التمرير. وتتابع التقدم عبر رابط بيئة الاختبار، وتبدي ملاحظاتك على نسخ حقيقية عند كل مرحلة.
- 04
التحسين والإطلاق
نضغط الملفات، وننظم تحميلها على مراحل، ونختبر على الهواتف والحواسيب المحمولة الأقدم، ونتحقق من إمكانية الوصول وبيانات البحث، ثم نطلق الموقع على استضافتك مع التحليلات وجلسة تدريب قصيرة للمحررين.
التقنيات التي نستخدمها
| المجال | التقنيات |
|---|---|
| ثلاثي الأبعاد | Three.js، React Three Fiber، GLSL، Blender |
| الحركة | GSAP، ScrollTrigger، Lenis، Theatre.js |
| الموقع | Next.js، Astro، React، TypeScript، Vite |
| التسليم | Sanity، Contentful، Vercel، Cloudflare |
علامتك تحتاج إلى موقع يتذكر الناس زيارته
منتجك أو علامتك في فئة فاخرة أو تقنية، أو يصعب تخيّله، والموقع المبني على قالب جاهز يجعله يبدو مثل غيره. تريد موقعاً رئيسياً يستكشف فيه الزوار المنتج بأبعاده الثلاثة، ويبقى سريعاً، ويظهر في البحث، ويقبل التعديل.
- مواقع رئيسية للعلامات الفاخرة
- مواقع مصغّرة لإطلاق المنتجات
- مواقع تسويقية لمنصات SaaS
- معارض أعمال الوكالات والاستوديوهات
- عروض الأجهزة والمعدات
- عروض المستثمرين والفعاليات
أسئلة شائعة
هل يضر الموقع ثلاثي الأبعاد بالظهور في البحث أو بزمن التحميل؟
قد يضر بهما إن بُني دون عناية، ولهذا نخطط لذلك من البداية. يبقى النص كله في HTML يولّده الخادم وتقرؤه محركات البحث كالمعتاد، وتقع لوحة العرض خلفه أو بجانبه. وتصبح الصفحة قابلة للاستخدام قبل اكتمال تحميل المشهد، وتُضغط الملفات وتصل تدريجياً، ولا تُحمَّل الشيفرة الثقيلة إلا حيث تلزم. ونضع سقفاً للتحميل ونقيس مقابله قبل الإطلاق.
هل نحتاج إلى موقع كامل ثلاثي الأبعاد أم إلى قسم واحد؟
كثيراً ما تحقق لحظة واحدة قوية أكثر مما يحققه نشر المشاهد في كل مكان. فإن كان لديك موقع ترضى عنه وتريد إضافة أداة تخصيص أو مشهد افتتاحي، فخدمتنا في Three.js أنسب لك. واختر الموقع الكامل حين يكون الموقع قيد إعادة البناء أصلاً، وتستفيد القصة من مشهد واحد متصل. وسنوصي بالخيار الأصغر حين يخدمك أكثر.
ماذا يحدث على الهواتف والأجهزة الأقدم التي تتعثر في تشغيل المشاهد؟
يفحص الموقع ما يستطيعه الجهاز ويتكيّف معه. تحصل الهواتف القادرة على المشهد بدقة أقل ومؤثرات أبسط. أما الأجهزة التي لا تجاريه، والزوار الذين طلبوا من نظامهم تقليل الحركة، فيحصلون على بديل مصمم من صور ثابتة أو فيديو قصير بالمحتوى نفسه. والهدف ألا يواجه أحد صفحة فارغة أو حركة متقطعة.
هل يستطيع فريق التسويق تحديث الموقع دون مطورين؟
نعم، في كل ما هو محتوى. تُدار العناوين والنصوص والصور ودراسات الحالة والمدونات والبيانات الوصفية في نظام إدارة محتوى مستقل عن الواجهة، بمحرر منظم ومعاينات. أما المشهد نفسه فشيفرة، لذلك يحتاج تغيير نموذج أو حركة إلى مطور. وحيث يفيد ذلك، نتيح إعدادات المشهد، مثل الألوان أو المنتجات المعروضة، حقولاً يغيّرها محرروك.
من ينشئ النماذج ثلاثية الأبعاد والمواد البصرية للموقع؟
يمكننا إنتاجها بأنفسنا، أو العمل من ملفات تزودنا بها، أو الجمع بين الاثنين. فإن كانت لديك بيانات تصميم هندسي (CAD) أو صور ثلاثية الأبعاد جاهزة، كيّفناها للعرض في الوقت الفعلي. وإن لم تكن، صمم فنانونا النماذج من المراجع ودليل علامتك. ويجري التوجيه الفني والنمذجة والتطوير في فريق واحد، وهذا يجنّبك الفجوة المعتادة بين ما تخيّله المصمم وما يستطيع المتصفح تشغيله.