threejs-skills
Erstellen Sie 3D-Grafiken und interaktive Szenen mit Three.js
Die Entwicklung von 3D-Weberlebnissen erfordert ein Verständnis für Szeneneinrichtung, Beleuchtung und Rendering-Muster. Diese Fähigkeit bietet systematische Three.js-Muster zur Erstellung performanter interaktiver 3D-Inhalte.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "threejs-skills". Erstellen Sie eine 3D-Szene mit einer rotierenden Kugel, die bei Klick die Farbe ändert
Erwartetes Ergebnis:
- Vollständige HTML-Datei mit Three.js r128 CDN-Import
- Szeneninitialisierung mit Kamera positioniert bei z=5
- SphereGeometry mit 32 Segmenten für glatte Darstellung
- MeshStandardMaterial mit Anfangsfarbe
- Ambient- und Directional-Lighting-Setup
- Animationsschleife rotiert die Kugel um x- und y-Achse
- Raycasting-Implementierung für Klickerkennung
- Event-Listener ändert Materialfarbe bei Intersection
- Fenstergrößen-Handler für responsives Canvas
Verwendung von "threejs-skills". Erstellen Sie ein Partikelfeld, das zur Kamera strömt
Erwartetes Ergebnis:
- BufferGeometry mit 2000 Partikeln unter Verwendung von Float32Array
- Zufällige Anfangspositionen verteilt im 3D-Raum
- PointsMaterial mit weißer Farbe und Größe 0.02
- Animationsschleife aktualisiert z-Positionen pro Frame
- Positionszurücksetzung wenn Partikel Kamera-Schwellenwert passieren
- Ordentliches Dispose-Muster für Bereinigung
- Optimierung für flüssige 60fps-Performance
Sicherheitsaudit
SicherThis skill contains documentation-only content (SKILL.md) teaching Three.js 3D graphics development. All 82 static analysis findings are false positives: backtick characters are Markdown code block delimiters, not shell execution; URLs are CDN resource references for the Three.js library; cryptographic warnings are pattern mismatches on version numbers and documentation text. No executable code, no network calls, no command injection vectors exist in this educational content.
Qualitätsbewertung
Was du bauen kannst
Interaktive Produktvisualisierung
Erstellen Sie 3D-Produktanzeigen, die Benutzer direkt im Browser drehen, zoomen und erkunden können.
Datenvisualisierungs-Dashboard
Transformieren Sie komplexe Datensätze in immersive 3D-Diagramme, Graphen und räumliche Darstellungen.
Pädagogische 3D-Inhalte
Erstellen Sie interaktive Modelle zur Vermittlung von Anatomie, Astronomie, Architektur oder Ingenieurskonzepten.
Probiere diese Prompts
Create a basic Three.js scene with a rotating cube. Include scene setup, camera, renderer with antialiasing, a colored cube geometry, lighting, and an animation loop. Add window resize handling.
Build an interactive 3D sphere that responds to mouse movement. Implement custom camera controls (drag to rotate, scroll to zoom) without OrbitControls. Use MeshStandardMaterial with proper lighting.
Generate a particle system with 1000+ particles using BufferGeometry. Add animation so particles move or rotate over time. Include proper performance practices like geometry and material disposal.
Implement raycasting to detect mouse clicks and hovers on 3D objects. When hovering, scale the object and change cursor style. When clicking, change the object color. Include an array of clickable objects.
Bewährte Verfahren
- Verwenden Sie immer Three.js r128 CDN für Artefakt-Kompatibilität und prüfen Sie Feature-Verfügbarkeit
- Fügen Sie Fenstergrößen-Handler hinzu, um Kamera-Seitenverhältnis und Renderer-Dimensionen zu aktualisieren
- Entsorgen Sie Geometrien, Materialien und Texturen beim Entfernen von Objekten, um Speicherlecks zu verhindern
Vermeiden
- Verwendung von OrbitControls oder Addon-Imports, die im r128 CDN nicht verfügbar sind
- Verwendung von CapsuleGeometry, das r142 oder neuere Versionen erfordert
- Vergessen, Lichter hinzuzufügen bei Verwendung beleuchteter Materialien wie MeshStandardMaterial