Three.js Parallax
Przepis na Three.js dla warstwowych kart paralaksy 2.5D PNG z dryfem myszy + przewijania.
Testowano · Działa
Co robi ten skill
Zawiera krok po kroku kod Three.js do układania przezroczystych PNG na płaszczyznach z paralaksą sterowaną myszą i dryfem sterowanym przewijaniem, w tym poprawkę przestrzeni kolorów sRGB i ustawienia głębokości/kolejności renderowania, które zapobiegają powszechnym problemom z walką z osią Z i wypranymi teksturami. Wyzwalana, gdy karta projektu lub kontener multimediów wymaga efektu paralaksy, 2.5D lub głębi obrazu warstwowego.
Raport z testu
Zbudowano tę samą 3-warstwową kartę testową na dwa sposoby i udostępniono obie przez lokalny serwer HTTP: naiwny punkt wyjścia układał wszystkie warstwy idealnie na środku bez poprawki przestrzeni kolorów, podczas gdy wersja kierowana przez umiejętność – zgodnie z jej własnym działającym przykładem dosłownie – rozłożyła warstwy w udokumentowaną kompozycję diagonalną z prawidłową kolejnością renderowania i zerowymi błędami konsoli.
Testowano: 2026-07-16 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/threejs-parallaxPrzepis na Three.js dla warstwowych kart paralaksy 2.5D PNG z dryfem myszy + przewijania.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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