Three.js Parallax
Recept na Three.js pro vrstvené PNG 2.5D paralaxní karty s posunem myší + posouváním.
Otestováno · Funguje
Co umí
Poskytuje krok za krokem kód Three.js pro skládání průhledných PNG na plochy s paralaxou řízenou myší a posunem řízeným posouváním, včetně opravy sRGB colorSpace a nastavení hloubky/pořadí vykreslování, které zabraňují běžným chybám z-fighting a vybledlých textur. Spouští se, když projektová karta nebo mediální kontejner potřebuje paralaxní, 2.5D nebo vrstvený hloubkový efekt obrazu.
Testovací report
Vytvořil jsem stejnou 3vrstvou testovací kartu dvěma způsoby a obě jsem servíroval přes lokální http server: naivní základní verze naskládala všechny vrstvy přesně do středu bez opravy colorSpace, zatímco verze řízená dovedností – doslovně podle vlastního pracovního příkladu – rozložila vrstvy do dokumentované diagonální kompozice se správným pořadím vykreslování a nulovými chybami v konzoli.
Testováno: 2026-07-16 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/threejs-parallaxRecept na Three.js pro vrstvené PNG 2.5D paralaxní karty s posunem myší + posouváním.
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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