Three.js Parallax

Three.js-oppskrift for lagdelte PNG 2.5D parallax-kort med mus + scroll drift.

av JudyZZ · JudyZZ/threejs-parallax-skill

Bestått ★ 9.2/10

Three.js Parallax — Three.js-oppskrift for lagdelte PNG 2.5D parallax-kort med mus + scroll drift.

Hva den gjør

Gir steg-for-steg Three.js-kode for å stable transparente PNG-er på plan med mus-drevet parallax og scroll-drevet drift, inkludert sRGB colorSpace-fiksen og dybde/render-ordensinnstillinger som forhindrer vanlige z-fighting og utvaskede teksturfeil. Utløses når et prosjektkort eller mediekontainer trenger en parallax, 2.5D, eller lagdelt bilde dybdeeffekt.

Testrapport

Bygde det samme 3-lags testkortet på to måter og serverte begge over en lokal http-server: den naive grunnlinjen stablet alle lagene midt på uten fargeområde-fiks, mens den ferdighetsguidede versjonen — som fulgte sitt eget fungerende eksempel ordrett — spredte lagene inn i den dokumenterte diagonale komposisjonen med korrekt render-rekkefølge og null konsollfeil.

Testet på: 2026-07-16 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

/threejs-parallaxThree.js-oppskrift for lagdelte PNG 2.5D parallax-kort med mus + scroll drift.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

Build a parallax card effect with layered PNGs that drift on scroll
How 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

Full rapport →