3d-web-experience
Erstellen Sie immersive 3D-Web-Erlebnisse
Erstellen Sie atemberaubende 3D-Websites und Web-Apps mit Three.js, React Three Fiber und Spline. Diese Fähigkeit hilft Ihnen, interaktive Produktkonfiguratoren, immersive Portfolios und ansprechende 3D-Oberflächen zu erstellen, die auf allen Geräten funktionieren.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "3d-web-experience". Erstellen Sie eine React Three Fiber Szene mit einem 3D-Modell-Loader
Erwartetes Ergebnis:
Ein vollständiges Codebeispiel mit:
- Canvas-Setup mit korrekter Beleuchtung
- Suspense Wrapper für asynchrones Laden
- useGLTF Hook für Modellladen
- Fortschrittsanzeige während des Ladens
- OrbitControls für Benutzerinteraktion
- Error Boundary für fehlgeschlagene Ladevorgänge
Verwendung von "3d-web-experience". Wie optimiere ich 3D-Modelle für das Web?
Erwartetes Ergebnis:
Schritt-für-Schritt-Anleitung:
1. Polygonanzahl in Blender reduzieren (unter 100K)
2. Texturen in einzelne Materialien einbacken
3. Als GLB/GLTF-Format exportieren
4. Mit gltf-transform unter Verwendung von draco komprimieren
5. Ziel: unter 5MB Dateigröße
6. CDN für die Auslieferung verwenden
Sicherheitsaudit
SicherThis 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.
Erkannte Muster
Qualitätsbewertung
Was du bauen kannst
E-Commerce Produkt-Viewer
Erstellen Sie interaktive 3D-Produktkonfiguratoren, mit denen Kunden Produkte vor dem Kauf drehen, zoomen und anpassen können.
Kreative Portfolio-Erweiterung
Fügen Sie beeindruckende 3D-Elemente zu persönlichen oder Agentur-Portfolios hinzu, um sich von statischen Websites abzuheben.
Immersive Landing Pages
Erstellen Sie ansprechende Landing Pages mit scroll-gesteuerten 3D-Animationen, die unvergessliche Benutzererlebnisse schaffen.
Probiere diese Prompts
Erstellen Sie eine grundlegende 3D-Szene mit Three.js mit einem rotierenden Würfel, ambienter Beleuchtung und Orbit Controls. Erklären Sie die Schlüsselkomponenten.
Zeigen Sie mir, wie ich ein GLB 3D-Modell mit React Three Fiber in eine React-App integriere. Fügen Sie Ladezustand und Fehlerbehandlung hinzu.
Erstellen Sie einen Produktkonfigurator, mit dem Benutzer Farben und Texturen auf einem 3D-Modell ändern können. Fügen Sie UI-Steuerelemente außerhalb des Canvas hinzu.
Erstellen Sie eine 3D-Szene, in der Kamerabewegung und Modellrotation durch die Scrollposition gesteuert werden. Verwenden Sie R3F ScrollControls.
Bewährte Verfahren
- Fügen Sie immer Ladezustände und Fortschrittsanzeigen für 3D-Inhalte hinzu
- Testen Sie 3D-Erfahrungen auf echten mobilen Geräten, nicht nur in Desktop-Browsern
- Stellen Sie statische Bild-Fallbacks für Benutzer auf Low-End-Geräten oder mit reduzierten Bewegungseinstellungen bereit
Vermeiden
- 3D-Elemente nur für visuelle Effekte ohne funktionalen Zweck hinzufügen
- 3D implementieren, das nur auf Desktop-Browsern funktioniert
- Kein Feedback während des Ladens von 3D-Inhalten bereitstellen