Three.js Parallax
Ricetta Three.js per schede parallax 2.5D PNG stratificate con deriva mouse + scroll.
Promosso
Cosa fa
Fornisce codice Three.js passo-passo per impilare PNG trasparenti su piani con parallax guidato dal mouse e deriva guidata dallo scroll, inclusa la correzione dello spazio colore sRGB e le impostazioni di profondità/ordine di rendering che prevengono comuni bug di z-fighting e texture sbiadite. Si attiva quando una scheda progetto o un contenitore multimediale necessita di un effetto parallax, 2.5D o di profondità immagine stratificata.
Rapporto di test
Costruita la stessa scheda di test a 3 livelli in due modi e servite entrambe tramite un server http locale: la baseline ingenua ha impilato tutti i livelli al centro senza correzione del colore, mentre la versione guidata dalla skill — seguendo il suo stesso esempio funzionante verbatim — ha distribuito i livelli nella composizione diagonale documentata con ordine di rendering corretto e zero errori di console.
Testato il: 2026-07-16 · Claude Code 2.x (agent harness)
Installazione
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
Comandi e prompt di esempio
/threejs-parallaxRicetta Three.js per schede parallax 2.5D PNG stratificate con deriva mouse + scroll.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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