Three.js Parallax
Three.js-Rezept für 2,5D-Parallax-Karten mit geschichteten PNGs mit Maus- und Scroll-Drift.
Getestet · Funktioniert
Was es kann
Bietet Schritt-für-Schritt-Three.js-Code zum Stapeln transparenter PNGs auf Ebenen mit mausgesteuertem Parallax und scrollgesteuertem Drift, einschließlich der sRGB-Farbraumkorrektur und Tiefen-/Renderreihenfolgeneinstellungen, die häufige Z-Fighting- und verwaschene Texturfehler verhindern. Wird ausgelöst, wenn eine Projektkarte oder ein Mediencontainer einen Parallax-, 2,5D- oder geschichteten Bildeffekt benötigt.
Testbericht
Erstellte dieselbe 3-Layer-Testkarte auf zwei Arten und servierte beide über einen lokalen HTTP-Server: Der naive Basis-Layer stapelte alle Layer mittig ohne Farbraumkorrektur, während die Skill-gesteuerte Version – die ihrem eigenen funktionierenden Beispiel wortwörtlich folgte – die Layer in die dokumentierte diagonale Komposition mit korrekter Renderreihenfolge und null Konsolenfehlern verteilte.
Getestet am: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/JudyZZ/threejs-parallax-skill.git mkdir -p ~/.claude/skills cp -r threejs-parallax-skill/threejs-parallax ~/.claude/skills/threejs-parallax
Befehle & Beispiel-Prompts
/threejs-parallaxThree.js-Rezept für 2,5D-Parallax-Karten mit geschichteten PNGs mit Maus- und Scroll-Drift.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Build a parallax card effect with layered PNGs that drift on scrollHow do I stack transparent images in Three.js for a mouse parallax?My Three.js layers look washed out, fix the colorSpace and z-fighting