Three.js Parallax
Three.js recept voor 2.5D parallax kaarten met gelaagde PNGs met muis + scroll drift.
Getest · Werkt
Wat het doet
Biedt stap-voor-stap Three.js code voor het stapelen van transparante PNGs op vlakken met muis-gestuurde parallax en scroll-gestuurde drift, inclusief de sRGB colorSpace fix en depth/render-order instellingen die veelvoorkomende z-fighting en doffe-textuur bugs voorkomen. Triggers wanneer een projectkaart of mediacontainer een parallax, 2.5D, of gelaagd-beeld diepte-effect nodig heeft.
Testrapport
Dezelfde 3-laagse testkaart op twee manieren gebouwd en beide via een lokale http server geserveerd: de naïeve baseline stapelde alle lagen dood in het midden zonder colorSpace fix, terwijl de skill-geleide versie — die het eigen uitgewerkte voorbeeld letterlijk volgde — de lagen verspreidde in de gedocumenteerde diagonale compositie met correcte render volgorde en nul console fouten.
Getest op: 2026-07-16 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/threejs-parallaxThree.js recept voor 2.5D parallax kaarten met gelaagde PNGs met muis + scroll drift.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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