مواقع ثلاثية الأبعاد وأدوات تخصيص المنتجات

خمسة أنواع من أعمال الـ 3D، ولكل منها نموذج حيّ تفتحه من هذه الصفحة.

أعمال منشورة أخرى: عارض مجسّمات ثلاثي الأبعاد، تأثير الغوص في الموقع، شخصية ثلاثية الأبعاد تفاعلية

يؤتي الـ 3D على الويب ثماره حين يكون المنتج ماديًا أو حين تحتاج العلامة التجارية إلى لحظة تميّزها.

• تجهيز المجسّمات من ملفات CAD أو STEP أو OBJ أو FBX أو GLB، أو النمذجة من الصور حين لا توجد ملفات
• تخفيف للويب: ضغط المجسّمات والخامات، تحميل تدريجي وسقف أداء محسوب للجوالات المتوسطة
• تصميم التفاعل: تدوير، تقريب، خيارات، نقاط تفاعلية وحركة مع التمرير
• الواجهة والهوية البصرية حول المشهد
• الربط بالكتالوج: خيارات مرتبطة برموز المنتجات (SKU) والأسعار والمخزون
• الانتقال إلى الواقع المعزز ليُرى المنتج المخصَّص في الغرفة
• أحداث تحليلات لتتبّع التفاعل والتخصيصات
• الدمج في موقعك على Next.js أو Shopify أو WooCommerce أو موقعك الحالي

1. تجهيز المجسّم. نأخذ ملفاتك أو ننمذج المنتج، ثم نخفّفه للويب بدون أن يخسر التفاصيل التي تبيع.
2. تصميم التفاعل. ما يستطيع الزائر فعله: الخيارات، الكاميرا، التمرير والنقاط التفاعلية.
3. البناء. مشهد Three.js أو React Three Fiber، الواجهة ومنطق الكتالوج.
4. تحسين الأداء. نختبر زمن التحميل وسلاسة الحركة على جوالات حقيقية، لا على الحواسيب فقط.
5. الدمج والإطلاق. مضمَّن في متجرك أو موقعك، مع التحليلات والتسليم.

نسعّر كل مشروع على حدة، خلال يوم عمل واحد من اتضاح نطاق العمل. وهذه هي العوامل التي تغيّر السعر.

• عدد المنتجات ورموزها (SKU) وخياراتها
• هل المجسّمات ثلاثية الأبعاد موجودة أم يجب إنشاؤها
• عمق التفاعل: عارض، أداة تخصيص أم موقع ثلاثي الأبعاد كامل
• الربط بـ Shopify أو WooCommerce أو كتالوج مخصّص
• الانتقال إلى الواقع المعزز والاختبار على أجهزة متعددة
• تحديثات المحتوى بعد الإطلاق

أرسل لنا صورة المنتج أو ملف المجسّم والخيارات التي تبيعها. نردّ خلال يوم عمل واحد بنطاق العمل، ومعه عند الحاجة نموذج أولي مبسّط تفتحه على جوالك.

Three.js · React Three Fiber · WebGL · glTF مع ضغط Draco · Blender · Next.js وTypeScript

يُبنى في جبيل (بيبلوس)، لبنان. ونخدم بيروت والخليج وعملاء الخارج عن بُعد.

تجارب ويب ثلاثية الأبعاد وأدوات تخصيص منتجات مبنية بـ Three.js. سيارة تدور حولها، حذاء تغيّر ألوانه، كنبة تتفحّصها بحجمها الحقيقي، صفحة تتكشّف مع التمرير. ثلاثي أبعاد حقيقي داخل صفحة ويب، بدون إضافات ولا تحميل، ويعمل على الجوال الذي في جيبك.

يستطيع الزائر أن يدوّر المجسّم، يقرّبه، يغيّر خاماته أو يتنقّل في المشهد بالتمرير، وتُفتح من رابط عادي على الحاسوب والجوال. وأداة تخصيص المنتجات ثلاثية الأبعاد هي نسختها للتجارة الإلكترونية: يختار المتسوّق الألوان والخامات والأجزاء، يرى النتيجة فورًا، وهذا التخصيص نفسه هو ما يُطلب.

لدينا أحد عشر نموذجًا ثلاثي الأبعاد حيًّا على هذا الموقع، كلها روابط تفتحها لا مقاطع فيديو. فريقنا للـ 3D، مطوّر Three.js متمرّس، فنّان نمذجة ومهندس رسوميات، ينمذج من ملفات CAD لديك أو من الصور أو من لا شيء، ثم يخفّف المجسّم للويب، فتبقى أداة تخصيص بعشرات الخيارات سريعة التحميل على جوال متوسط المواصفات.

أدوات التخصيص ترتبط بكتالوجك، فما يبنيه العميل هو ما يُطلب، وأي مجسّم يمكن أن ينتقل إلى الواقع المعزز ليراه العميل في غرفته. نبني لعملاء في لبنان، وعن بُعد لعلامات تجارية في الإمارات والسعودية وقطر. إذا كانت صورة المنتج الثابتة تكلّفك مبيعات، فهذا هو الحل.

• جولات افتراضية 360°: دع المشترين والضيوف يتجوّلون في مكانك من أي جوال، قبل أن يصلوا إليه.
• الواقع المعزز (WebAR) ومنيو الواقع المعزز: أطباق ومنتجات وبطاقات عمل بالواقع المعزز من رمز QR، بدون أي تطبيق.
• تطوير المواقع وتطبيقات الجوال: مواقع Next.js، تطبيقات ويب تقدّمية (PWA)، لوحات تحكم ومتاجر إلكترونية.

كل الخدمات · تصفّح المشاريع الـ 38 كلها

أداة تخصيص المنتجات ثلاثية الأبعاد (3D Product Configurator) صفحة ويب يغيّر فيها العميل ألوان المنتج أو خاماته أو أجزاءه أو مقاسه ويرى النتيجة مرسومة لحظيًا بثلاثة أبعاد. يُحفظ التخصيص كمجموعة خيارات مرتبطة بكتالوجك، فيصلك الطلب مطابقًا لما بناه العميل. أداتا تخصيص الحذاء والتيشيرت لدينا نموذجان مفتوحان.

كلاهما ممكن. إذا كانت لديك ملفات CAD أو STEP أو OBJ أو FBX أو GLB نجهّزها ونخفّفها. وإذا لم يكن لديك سوى صور أو عيّنة من المنتج، يبني فنّان النمذجة لدينا المجسّم من الصفر أو من مسح تصويري. والنتيجة في الحالتين مجسّم جاهز للويب يُحمَّل بسرعة على الجوال.

لا، إذا بُني ضمن سقف أداء محسوب. نضغط المجسّمات والخامات، نحمّل المشهد تدريجيًا ونُبقي باقي الصفحة HTML عاديًا، فتبقى النصوص والعناوين والروابط قابلة للزحف وتبقى الصفحة سريعة. المشهد ثلاثي الأبعاد محتوى، لا بديل عن المحتوى، ونكتب كل صفحة بحيث تقرؤها محركات البحث وإجابات الذكاء الاصطناعي بدون تشغيل المشهد.

نعم. نصمّم للجوال أولًا: عدد مضلّعات محسوب، خامات مضغوطة وتحميل تدريجي، فتبقى التجربة سلسة على أجهزة أندرويد المتوسطة وعلى آيفون. وكل نموذج في هذه الصفحة تستطيع فتحه على جوالك الآن.

نعم. ترتبط الخيارات برموز منتجاتك وأسعارك ومخزونك في Shopify أو WooCommerce أو في متجر Next.js مخصّص، فيذهب المنتج المخصَّص إلى السلة بالسعر الصحيح ويصل إلى قسم التجهيز كطلب عادي. وللمصنّعين نستطيع تصدير التخصيص كورقة مواصفات.

نعم. أي مجسّم نبنيه يمكن أن ينتقل إلى WebAR، فينقر العميل زرًّا ويرى الكرسي أو الحذاء أو المصباح الذي خصّصه في غرفته وبحجمه الحقيقي، بدون تثبيت أي تطبيق. وهي التقنية نفسها التي نستخدمها في منيو الواقع المعزز وبطاقات العمل.

يتوقف ذلك على عدد المجسّمات والخيارات وعلى وجود المجسّمات أصلًا. عارض واحد بمجسّم جاهز عمل قصير، أما أداة تخصيص بأجزاء كثيرة مع ربط بالكتالوج وواقع معزز فمشروع يمتد أسابيع. نبدأ بنموذج أولي مبسّط لترى التفاعل على جوال حقيقي قبل البناء الكامل.

لموقع ويب، خيارنا الأول Three.js (مع React Three Fiber داخل تطبيق Next.js): ملفات صغيرة، بدء سريع، يعمل على الجوال ويندمج مع باقي الصفحة. Babylon.js بديل قدير بمواصفات قريبة. أما Unity WebGL فينتج ملفات كبيرة وبدءًا بطيئًا، وهذا مقبول للعبة في المتصفح لا لصفحة منتج.