Three.js Parallax

Three.js-recept för lager-PNG 2.5D parallax-kort med mus + scroll-drift.

av JudyZZ · JudyZZ/threejs-parallax-skill

Testad · Fungerar ★ 9.2/10

Three.js Parallax — Three.js-recept för lager-PNG 2.5D parallax-kort med mus + scroll-drift.

Vad den gör

Ger steg-för-steg Three.js-kod för att stapla transparenta PNGs på plan med mus-driven parallax och scroll-driven drift, inklusive sRGB colorSpace-fixen och djup/render-ordningsinställningar som förhindrar vanliga z-fighting- och urtvättade texturbuggar. Triggers när ett projektkort eller mediekontainer behöver en parallax, 2.5D eller lager-bild-djup-effekt.

Testrapport

Byggde samma 3-lagers testkort på två sätt och serverade båda via en lokal http-server: den naiva baslinjen staplade alla lager död-center utan colorSpace-fix, medan den färdighetsstyrda versionen -- som följde sitt eget fungerande exempel ordagrant -- spred lagren i den dokumenterade diagonala kompositionen med korrekt render-ordning och noll konsolfel.

Testad: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

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

Kommandon och exempelprompter

/threejs-parallaxThree.js-recept för lager-PNG 2.5D parallax-kort med mus + scroll-drift.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →