threejs-builder
بناء تطبيقات ويب ثلاثية الأبعاد باستخدام Three.js
يتطلب إنشاء محتوى ويب ثلاثي الأبعاد فهم WebGL والـ shaders وبرمجة الرسومات ثلاثية الأبعاد. تولد هذه المهارة تطبيقات Three.js كاملة مع إعداد المشهد والإضاءة والمواد والرسوم المتحركة والعرض المتجاوب باستخدام وحدات ES الحديثة.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"threejs-builder" 사용 중입니다. إنشاء مشهد Three.js مع أشكال هندسية عائمة تستجيب لحركة الماوس
예상 결과:
- ملف HTML كامل مع استيرادات Three.js من CDN
- أشكال هندسية ثلاثية الأبعاد متعددة (مكعبات، كرات، أشكال طوق)
- دوران سلس ورسوم متحركة للموضع تعتمد على الماوس
- إعداد إضاءة محيطة وتوجيهية
- لوحة قماشية متجاوبة تملأ المنطقة المرئية
- هيكل استيراد وحدات ES الحديث
"threejs-builder" 사용 중입니다. بناء حقل جسيمات ثلاثي الأبعاد مع جسم مشع في المنتصف
예상 결과:
- نظام جسيمات يعتمد على BufferGeometry مع أكثر من 1000 جسيم
- شبكة م实例ية للعرض الفعال
- جسم مشع في المنتصف مع مادة مشعة
- دورة رسوم متحركة دوران مستمرة
- معالج تغيير الحجم لاستجابة نافذة المتصفح
"threejs-builder" 사용 중입니다. إنشاء عارض منتج ثلاثي الأبعاد تفاعلي مع تحكم المدار
예상 결과:
- OrbitControls للدوران والسحب والتكبير بالماوس
- تخميد سلس لحركة الكاميرا الطبيعية
- مادة قياسية مع إضاءة واقعية
- تحجيم لوحة قماشية متجاوب
- هيكل كود نظيف مع تعليقات
보안 감사
안전This is a documentation-only skill containing Three.js tutorials and code examples. All 140 static findings are false positives. The scanner misidentified JavaScript template literals (backticks) as Ruby/shell backtick execution, GLSL shader code as command execution, and legitimate graphics programming terms (raycaster, loader, copy) as security threats. This skill contains no executable code, no network calls, no file system access, and no security-sensitive operations.
위험 요인
⚙️ 외부 명령어 (100)
🌐 네트워크 접근 (15)
📁 파일 시스템 액세스 (1)
품질 점수
만들 수 있는 것
إنشاء مواقع محفظة ثلاثية الأبعاد
بناء أقسام رئيسية ثلاثية الأبعاد تفاعلية وعروض منتجات وخلفية متحركة لمحفظة ويب حديثة.
نماذج أولية لواجهات ثلاثية الأبعاد
تصور واختبار سريع لمفاهيم واجهة المستخدم ثلاثية الأبعاد ومنتجات التكوين والرسوم البيانية التفاعلية.
تعليم مفاهيم الويب ثلاثية الأبعاد
توليد أمثلة Three.js نظيفة وتعليمية لـ WebGL والرياضيات ثلاثية الأبعاد والرسوم التفاعلية.
이 프롬프트를 사용해 보세요
إنشاء تطبيق Three.js مع مكعب ملون دوائر وإضاءة مناسبة وتصميم متجاوب. استخدام وحدات ES الحديثة.
إنشاء مشهد Three.js يعرض منتجاً ثلاثي الأبعاد مثل الساعة أو الحذاء مع تحكم المدار وإضاءة واقعية ومواد ناعمة.
بناء تطبيق Three.js مع آلاف الجسيمات المتحركة تشكل أنماطاً مثيرة مع تفاعل الماوس.
إنشاء مخطط شريطي أو مخطط مبعثر ثلاثي الأبعاد في Three.js مع انتقالات بيانات متحركة وتحكم تفاعلي في الكاميرا.
모범 사례
- تضمين إضاءة مناسبة دائماً حيث تتطلب معظم المواد ذلك
- استخدام Math.min(window.devicePixelRatio, 2) لتقييد الدقة
- استيراد أدوات التحكم والمحملات من مسار examples/jsm/
- إنشاء الأشكال الهندسية والمواد مرة واحدة وإعادة استخدامها للأداء
피하기
- لا تقم بإنشاء أشكال هندسية جديدة في حلقة الرسوم المتحركة
- تجنب أنماط CommonJS القديمة أو المتغير THREE العام
- لا تنسَ إضافة الكائنات إلى المشهد أو لن يتم عرضها
- لا تتخطى مستمع حدث تغيير الحجم للتصميم المتجاوب
자주 묻는 질문
ما المتصفحات التي تدعم Three.js؟
هل يمكنني استخدام هذا مع React أو Vue؟
كيف أضيف هذا إلى موقعي الحالي؟
هل Three.js مجاني للاستخدام التجاري؟
لماذا مشهدي أسود؟
كيف يمكنني تحسين الأداء؟
개발자 세부 정보
라이선스
MIT
참조
main
파일 구조