3d-web-experience
Créez des expériences web 3D immersives
Concevez des sites web et des applications web 3D époustouflants avec Three.js, React Three Fiber et Spline. Cette compétence vous aide à créer des configurateurs de produits interactifs, des portfolios immersifs et des interfaces 3D engageantes qui fonctionnent sur tous les appareils.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「3d-web-experience」を使用しています。 Créez une scène React Three Fiber avec un chargeur de modèle 3D
期待される結果:
Un exemple de code complet montrant :
- Configuration du canvas avec un éclairage approprié
- Wrapper Suspense pour le chargement asynchrone
- Hook useGLTF pour le chargement du modèle
- Indicateur de progression pendant le chargement
- OrbitControls pour l'interaction utilisateur
- Error boundary pour les chargements échoués
「3d-web-experience」を使用しています。 Comment optimiser les modèles 3D pour le web ?
期待される結果:
Guide étape par étape couvrant :
1. Réduisez le nombre de polygones dans Blender (moins de 100K)
2. Cuisez les textures dans des matériaux uniques
3. Exportez au format GLB/GLTF
4. Compressez avec gltf-transform en utilisant draco
5. Ciblez une taille de fichier inférieure à 5Mo
6. Utilisez un CDN pour la diffusion
セキュリティ監査
安全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.
検出されたパターン
品質スコア
作れるもの
Visionneuse de produits e-commerce
Créez des configurateurs de produits 3D interactifs qui permettent aux clients de faire pivoter, zoomer et personnaliser les produits avant l'achat.
Amélioration de portfolio créatif
Ajoutez des éléments 3D impressionnants aux portfolios personnels ou d'agence pour vous démarquer des sites web statiques.
Pages de destination immersives
Concevez des pages de destination engageantes avec des animations 3D pilotées par le défilement qui créent des expériences utilisateur mémorables.
これらのプロンプトを試す
Créez une scène 3D de base avec Three.js avec un cube en rotation, un éclairage ambiant et des contrôles d'orbite. Expliquez les composants clés.
Montrez-moi comment intégrer un modèle 3D GLB dans une application React avec React Three Fiber. Incluez l'état de chargement et la gestion des erreurs.
Construisez un configurateur de produit qui permet aux utilisateurs de changer les couleurs et les textures sur un modèle 3D. Incluez des contrôles UI en dehors du canvas.
Créez une scène 3D où le mouvement de la caméra et la rotation du modèle sont contrôlés par la position de défilement. Utilisez ScrollControls de R3F.
ベストプラクティス
- Incluez toujours des états de chargement et des indicateurs de progression pour le contenu 3D
- Testez les expériences 3D sur de véritables appareils mobiles, pas seulement sur des navigateurs desktop
- Fournissez des images statiques de repli pour les utilisateurs sur des appareils bas de gamme ou avec des préférences de mouvement réduit
回避
- Ajouter des éléments 3D purement pour l'effet visuel sans objectif fonctionnel
- Implémenter une 3D qui ne fonctionne que sur les navigateurs desktop
- Ne fournir aucun retour pendant le chargement du contenu 3D