Atölye Tasarım
موقع ومصمم ورش ثلاثي الأبعاد
مصمم يبني ورشة المدرسة ثلاثية الأبعاد في المتصفح باستخدام React Three Fiber وdrei؛ يُنتَج الأثاث بالكود دون ملفات نماذج جاهزة.
اعرض المنتجما بنيناه بهذه التقنية
جميعها منشورة؛ صفحات المتاجر والتفاصيل في صفحة المنتجات.
متى يكون Three.js الخيار الصحيح
Three.js مكتبة JavaScript ترسم مشاهد ثلاثية الأبعاد في صفحة الويب مستفيدة من دعم المتصفح لـ WebGL. لا حاجة إلى تنزيل تطبيق: كل من يفتح الرابط يرى المشهد على الهاتف أو الحاسوب. وأكثر ما تفيد فيه المصممات التفاعلية التي يضبط فيها العميل المنتج بحسب حاجته ويرى النتيجة فوراً.
حيث يناسب Three.js
- يتغير منتجك بحسب المقاسات أو الخيارات، ويصعب على العميل أن يقرر دون أن يرى النتيجة
- تريد أن يُعدّ العميل تصميمه بنفسه ويرسله إليك قبل محادثة البيع
- عرض مكان أو توزيع أو منتج من كل الزوايا يقول أكثر مما تقوله الصورة
- تريد في الصفحة التعريفية تأثيراً بصرياً خفيفاً لا يطغى على المحتوى
حيث لا نقترح Three.js
- بضع صور جيدة أو فيديو قصير تشرح المنتج بما يكفي
- تحتاج إلى رسم فني دقيق للإنتاج: التصميم في المتصفح مسودة أولى ولا يحل محل الرسم الهندسي (CAD)
- المنتج نفسه لعبة أو تجربة واقع افتراضي: محركات الألعاب أنسب لذلك
Atölye Tasarım: بناء ورشة المدرسة في المتصفح
في المصمم الذي بنيناه لـ okultasarım.com تبني المدرسة ورشتها في أربع خطوات: تُدخل مقاسات الغرفة وشكلها، وتختار عدد الطلاب والمرحلة الدراسية، وتحدد الألوان، ثم ترسل التصميم إلى الشركة عبر WhatsApp. وهناك مصممات منفصلة لورش النجارة، والخزف والفن، والطهي. ومن القرارات البارزة في الكود:
- تحسب التوزيعَ دالةُ TypeScript مستقلة عن React: توضع طاولات العمل والطاولات والمقاعد مع مراعاة منطقة الباب والجدران ذات النوافذ والممرات، وتتحقق الاختبارات من هذه القواعد.
- لا توجد ملفات نماذج ثلاثية الأبعاد جاهزة. تُنتَج طاولات العمل والطاولات والمقاعد وإطار السقف واللافتة بالكود عبر مكونات تأخذ مقاساتها كمعاملات، فيتغير النموذج عندما تتغير المقاسات.
- تُرسم المقاعد باستخدام InstancedMesh واحد لكل جزء، فلا يزداد عدد استدعاءات الرسم بازدياد عدد الطلاب.
- عند إضافة وحدة أو تغيير مقاس تستقر الأجزاء في مكانها بحركة نابضية؛ ولا شيء يقفز من موضع إلى آخر.
- في الوضع المتقدم يمكن أن تكون الغرفة على شكل حرف L، وتوضع الأعمدة وعناصر الجدران بسحبها على مخطط علوي.
- يُضغط التصميم ويُحفظ في شريط العنوان، فلا يضيع عند إعادة تحميل الصفحة ويمكن مشاركته كرابط.
- عند الإرسال يُحوَّل المشهد إلى صور من زوايا كاميرا ثابتة وتُنشأ صورة للمشاركة، وترى الشركة التصميم في صفحة المشاركة الخاصة به.
Three.js مباشرة أم React Three Fiber
نستخدم الاثنين. في المشاهد كثيرة الأجزاء التي تتواصل مع الواجهة باستمرار نختار React Three Fiber: كل قطعة أثاث في المشهد مكوّن React، وكل تغيير في اللوحة ينعكس على المشهد مباشرة. أما لتأثير بصري واحد فإن Three.js المباشر مع shader نكتبه بأنفسنا يعني كوداً أقل وحزمة أصغر. بهذه الطريقة كُتب حقل الجسيمات الذي يتبع المؤشر في الصفحة الرئيسية لهذا الموقع، ويتوقف الرسم حين لا يكون ظاهراً أو حين تكون علامة التبويب في الخلفية.
| React Three Fiber | Three.js مباشرة | |
|---|---|---|
| طريقة كتابة المشهد | كمكونات React | تُنشأ الكائنات بالكود واحداً واحداً |
| الربط مع الواجهة | تتشارك اللوحة والمشهد الحالة نفسها | يُبنى الربط يدوياً |
| يناسب | المصممات والمشاهد التفاعلية كثيرة الأجزاء | التأثيرات المفردة والخلفيات الخفيفة |
| مثالنا | Atölye Tasarım | حقل الجسيمات في الصفحة الرئيسية لـ pepechura.com |
ما نستخدمه بجانب Three.js
React Three Fiber
لبناء مشهد Three.js من مكونات React. كُتب مشهد Atölye Tasarım بالكامل به.
drei
أدوات تحكم جاهزة بالكاميرا، وإضاءة محيطة، وظلال تلامس، ونص ثلاثي الأبعاد، ومراقبة للأداء. ويتم التبديل بين المنظور والمخطط العلوي عبر CameraControls من drei.
postprocessing
تظليل ناعم في الزوايا ونقاط الالتقاء (N8AO) وتعيين لوني سينمائي. معطّل على الهواتف، ويتوقف تلقائياً على الحاسوب إذا انخفض معدل الإطارات.
react-spring
حركات نابضية لاستقرار الوحدات في أماكنها ولتغيّر المقاسات (@react-spring/three).
Zustand
حالة التصميم المشتركة بين لوحة المصمم ومشهده.
Test Renderer وVitest
تُختبر مكونات المشهد عبر @react-three/test-renderer دون فتح متصفح، وتُختبر حسابات التوزيع والسعر بشكل منفصل عبر Vitest.
كيف يسير مشروع مصمم ثلاثي الأبعاد
- 01
مكالمة تعريفية مجانية
30 دقيقةنتحدث عن المقاسات والخيارات التي تغيّر منتجك، وعمّا يفعله العميل بعد إنهاء التصميم، وعن الميزانية التي تفكر فيها.
- 02
نطاق مكتوب وعرض سعر
نكتب الخيارات وقواعد التوزيع وجودة العرض المستهدفة على الهاتف والحاسوب ومعايير القبول.
- 03
إصدارات أسبوعية
كل أسبوع تجرب نسخة عاملة من المشهد على هاتفك وحاسوبك، وتوجّه ملاحظاتك على المقاسات والمظهر عمل الأسبوع التالي.
- 04
الاختبار والإطلاق
يختبر مهندس ضمان جودة أول المصمم قبل الإطلاق على هواتف ومتصفحات مختلفة، وتُراجَع في هذه المرحلة أيضاً الشاشة البديلة التي تظهر على الأجهزة التي لا تستطيع فتح العرض ثلاثي الأبعاد.
- 05
الثلاثون يوماً بعد الإطلاق
30 يوماًنصلح مجاناً الأخطاء التي تظهر في هذه الفترة، وبعدها يمكنك المتابعة بصيانة شهرية.
ننشر المدد ونطاقات الميزانية في صفحتي تطوير تطبيقات الويب والأسعار، وكل ما في هذه الصفحة يتبع الأرقام نفسها.
أسئلة شائعة عن Three.js
هل يعمل المصمم ثلاثي الأبعاد بسلاسة على الهاتف؟
نتخذ لذلك عدة تدابير. في Atölye Tasarım لا يُعاد رسم المشهد إلا عندما يتغير شيء ما؛ وعلى الهواتف تُحدَّد الدقة وتكون تأثيرات الظلال معطلة من البداية؛ وعلى الحاسوب تتوقف التأثيرات تلقائياً إذا انخفض معدل الإطارات. وفي المتصفحات التي لا تدعم WebGL تعرض الصفحة الرئيسية صورة بدل المشهد، ويقترح المصمم المتابعة عبر WhatsApp.
هل ترى محركات البحث المشهد ثلاثي الأبعاد؟
يُرسم المشهد في المتصفح ولا تقرؤه محركات البحث، وما تحتاج إلى قراءته هو المعلومات التي ينقلها المشهد. في Atölye Tasarım يُجهَّز نص الصفحة وعناوينها وصور المشاركة على الخادم باستخدام Next.js، ويُحمَّل المشهد ثلاثي الأبعاد بعد فتح الصفحة.
هل يمكنكم استخدام النماذج ثلاثية الأبعاد الموجودة لدينا؟
لا يحتوي Atölye Tasarım على أي ملفات نماذج جاهزة؛ يُنتَج الأثاث بالكود انطلاقاً من المقاسات، ولهذا يناسب أي مقاس. وإذا كانت لديك نماذج ثلاثية الأبعاد لمنتجاتك فننظر معاً في المكالمة التعريفية إلى صيغة الملفات وحجمها ونقرر الطريق المناسب.
هل يمكن أن يعرض المصمم السعر أيضاً؟
نعم. في Atölye Tasarım يظهر نطاق سعر تقديري انطلاقاً من الوحدات المختارة، مع توضيح صريح بأنه غير ملزم. وعند إرسال التصميم يُعاد حساب السعر على الخادم، ولا يُعتمد على الرقم القادم من المتصفح.
ماذا يبقى لديّ في نهاية المشروع؟
ترخيص دائم لاستخدام البرنامج ووثائقه. ونقل الكود المصدري إليك ممكن مقابل رسوم إضافية تُكتب بشكل منفصل في العرض.
خدمات ذات صلة
تواصل معنا
لنتحدث عن مصممك ثلاثي الأبعاد
في مكالمة تعريفية مجانية مدتها 30 دقيقة نحدد معاً خيارات منتجك وطريقة عرضه في المتصفح.