3d-web-experience
إنشاء تجارب ويب ثلاثية الأبعاد الغامرة
بناء مواقع وتطبيقات ويب ثلاثية الأبعاد مذهلة باستخدام Three.js وReact Three Fiber وSpline. يساعدك هذا الملف الشخصي على إنشاء مُعدِّلات المنتجات التفاعلية، ومجموعات الأعمال الغامرة، وواجهات ثلاثية الأبعاد جذابة تعمل عبر جميع الأجهزة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "3d-web-experience". إنشاء مشهد React Three Fiber مع نموذج تحميل ثلاثي الأبعاد
النتيجة المتوقعة:
مثال كود كامل يوضح:
- إعداد Canvas مع إضاءة مناسبة
- غلاف Suspense للتحميل غير المتزامن
- خطاف useGLTF لتحميل النموذج
- مؤشر التقدم أثناء التحميل
- OrbitControls لتفاعل المستخدم
- حدود الخطأ للتحميل الفاشل
استخدام "3d-web-experience". كيف أحسّن النماذج ثلاثية الأبعاد للويب؟
النتيجة المتوقعة:
دليل خطوة بخطوة يغطي:
1. تقليل عدد المضلعات في Blender (أقل من 100K)
2. خبزTextures في مواد واحدة
3. التصدير كتنسيق GLB/GLTF
4. الضغط باستخدام gltf-transform مع draco
5. استهداف حجم ملف أقل من 5 ميجابايت
6. استخدام CDN للتسليم
التدقيق الأمني
آمنThis skill is a documentation file containing markdown with code examples for 3D web development. All static findings are false positives: (1) The 'external_commands' detections are markdown code block delimiters misidentified as Ruby backticks; (2) The 'weak cryptographic algorithm' detections are false matches on context words; (3) The single URL is a legitimate Spline CDN example. No actual security risks present.
الأنماط المكتشفة
درجة الجودة
ماذا يمكنك بناءه
عارض المنتجات للتجارة الإلكترونية
إنشاء مُعدِّلات المنتجات ثلاثية الأبعاد التفاعلية التي تتيح للعملاء تدوير وتكبير وتخصيص المنتجات قبل الشراء.
تحسين المحفظة الإبداعية
إضافة عناصر ثلاثية الأبعاد مذهلة إلى المحافظ الشخصية أو Agencies للتميز عن المواقع الثابتة.
صفحات الهبوط الغامرة
بناء صفحات هبوط جذابة بـanimations ثلاثية الأبعاد مدفوعة بالتمرير تُنشئ تجارب مستخدم لا تُنسى.
جرّب هذه الموجهات
إنشاء مشهد أساسي ثلاثي الأبعاد باستخدام Three.js مع مكعب يدور، وإضاءة محيطة، وضوابط المدار. شرح المكونات الرئيسية.
أظهر لي كيفية دمج نموذج GLB ثلاثي الأبعاد في تطبيق React باستخدام React Three Fiber. تضمين حالة التحميل ومعالجة الأخطاء.
بناء مُعدِّل منتج يتيح للمستخدمين تغيير الألوان والأنسجة على نموذج ثلاثي الأبعاد. تضمين عناصر تحكم واجهة المستخدم خارج اللوحة.
إنشاء مشهد ثلاثي الأبعاد حيث تتحكم حركة الكاميرا وتدور النموذج موضع التمرير. استخدام R3F ScrollControls.
أفضل الممارسات
- قم دائماً بتضمين حالات التحميل ومؤشرات التقدم للمحتوى ثلاثي الأبعاد
- اختبر التجارب ثلاثية الأبعاد على أجهزة حقيقية وليست فقط على متصفحات سطح المكتب
- وفر صوراً ثابتة بديلة للمستخدمين على الأجهزة ذات المواصفات المنخفضة أو الذين يفضلون الحركة المخفضة
تجنب
- إضافة عناصر ثلاثية الأبعاد لغرض بصري بحت دون غرض وظيفي
- تنفيذ ثلاثي الأبعاد الذي يعمل فقط على متصفحات سطح المكتب
- فشل في توفير أي ملاحظات تحميل أثناء تحميل المحتوى ثلاثي الأبعاد