Three.js Parallax

Three.js opskrift til lagdelt PNG 2.5D parallax-kort med mus + scroll drift.

Af JudyZZ · JudyZZ/threejs-parallax-skill

Testet · Virker ★ 9.2/10

Three.js Parallax — Three.js opskrift til lagdelt PNG 2.5D parallax-kort med mus + scroll drift.

Hvad det gør

Giver trin-for-trin Three.js-kode til at stable gennemsigtige PNG'er på planer med musestyret parallax og scrollstyret drift, inklusive sRGB colorSpace-rettelsen og dybde/render-rækkefølge-indstillinger, der forhindrer almindelige z-fighting og udvaskede tekstur-fejl. Udløses, når et projektkort eller mediecontainer kræver en parallax, 2.5D eller lagdelt billeddybde-effekt.

Testrapport

Byggede det samme 3-lags testkort på to måder og serverede begge over en lokal http-server: den naive basis-version stablede alle lag døde-centreret uden colorSpace-rettelse, mens den færdigheds-guidede version -- der fulgte sit eget fungerende eksempel ordret -- spredte lagene ud i den dokumenterede diagonale komposition med korrekt render-rækkefølge og nul konsolfejl.

Testet: 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

Kommandoer og eksempelprompter

/threejs-parallaxThree.js opskrift til lagdelt PNG 2.5D parallax-kort med mus + scroll drift.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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

Læs hele rapporten →