← Alle Skills · 3D · Three.js Scene Builder

Three.js Scene Builder — fertige Ausgabe
Runs inClaude Code Codex Cursor Muse Dot Grok Bot Cue OpenClaw Hermes
Install guidesClaude Code Codex Cursor Muse
Du brauchst:Ein Szenen-Briefing (brief.txt: [objects] id: shape | size … | pos … | material …; [lights]; [camera]; [scene]) und ein Browser mit WebGL, um die Szene zu sehen.

Similar Skills

Blender Scene Assistant previewFree

Blender Scene Assistant

  1. Szenen-Briefing in Klartext schreiben
  2. Generator auf das Briefing ausführen
  3. Bericht lesen, bevor du der Szene vertraust
  4. In Blender rendern, headless oder im Viewport
  5. Fehler korrigieren und erneut ausführen

View all skills →

Das bekommst du

  • Eine eigenständige scene.html: Import-Map, Renderer mit Schatten, jedes Objekt mit seinem Standardmaterial
  • OrbitControls und Drehteller-Animation, plus einen Resize-Handler
  • Ein Szenenbericht: Objekt- und Lichttabellen plus alle Fehler und Warnungen
  • Ein Modulskript, das bei jedem Lauf mit node --check geprüft wird

Gut geeignet für

  • Produktdrehteller und 3D-Webszenen zum Teilen per Link
  • Eine 3D-Szene prototypisieren, bevor man sie in eine Seite einbindet
  • Die Szene ehrlich halten: nur was aufgelistet ist, wird gebaut

Nicht geeignet für

  • Komplexe geladene Modelle (GLTF/FBX) — nur Primitive
  • Fehlende Objekte, Lichter oder einen Hintergrund erfinden, um eine Szene zu vervollständigen
  • Beweisen, dass eine Szene gut aussieht — ein sauberer Bericht heißt, sie entspricht dem Briefing, nicht der Realität

Beispielergebnis

Ein Beispiel dafür, was dieser Skill produziert. Beispielinhalt, zur Veranschaulichung gezeigt.

Three.js Scene Builder report — sample

Scene report: Yellow Mug Turntable

Objects: 3 valid | Lights: 2 | Camera: custom | Background: #262627 | Turntable: on

Objects: pedestal (cylinder 2.0, 0.15); mug (cylinder 0.9, 1.1); backdrop (plane 12, 12).

Errors: none. Warnings: none. Module node --check: OK.

Messy draft check: 2 valid objects, 3 errors (unknown capsule shape; duplicate mug id; negative-size badbox), 1 warning (missing camera — default added).

Über diesen Skill

You say
Baue mir einen Three.js-Produktdrehteller: eine gelbe Tasse auf einem dunklen Sockel, heller Hintergrund, Orbit-Steuerung.

Installation

  1. Kopiere den Installations-Prompt in deinen Agenten: Read https://skillu.dev/install/agent.md, then install the Three.js Scene Builder skill (threejs-scene-builder).
  2. Oder lade das Skill-Paket nach dem Start von dieser Seite herunter und lege seinen Ordner in das Skills-Verzeichnis deines Agenten.
  3. Rufe ihn per Slash-Befehl auf, z. B. /threejs-scene-builder, und beschreibe in einfachen Worten, was du willst.

Häufige Fragen

Was passiert, wenn mein Briefing einen Fehler hat?

Die Szene wird trotzdem aus den gültigen Teilen erzeugt, und der Bericht listet alle Fehler und Warnungen: unbekannte Formen werden verworfen, doppelte IDs behalten ihre erste Definition, falsche Größen werden benannt und eine fehlende Kamera wird durch den angegebenen Standard ersetzt. Korrigiere das Briefing und führe es erneut aus.

Baut sie etwas, das ich nicht aufgelistet habe?

Nein. Nur Objekte, Lichter und Einstellungen aus deinem Briefing erscheinen. Ein fehlender Hintergrund oder ein zweites Licht ist eine Lücke im Briefing, die du schließen musst — der Skill füllt sie nicht.

Braucht die Szene einen Server?

Jeder statische Host oder ein einzeiliger lokaler Server genügt (python3 -m http.server). Die Seite lädt three.js 0.160.0 vom unpkg-CDN; für den vollständigen Offline-Betrieb lade das Modul und das OrbitControls-Add-on lokal herunter und zeige die Import-Map darauf.

Premium holen Mehr Skills ansehen