Three.js Parallax
Recette Three.js pour des cartes parallax 2.5D PNG superposées avec dérive souris + défilement.
Testé · Fonctionne
Ce que fait
Fournit du code Three.js étape par étape pour empiler des PNG transparents sur des plans avec parallax piloté par la souris et dérive pilotée par le défilement, y compris la correction de l'espace colorimétrique sRGB et les paramètres de profondeur/ordre de rendu qui empêchent les bugs courants de z-fighting et de textures délavées. Se déclenche lorsqu'une carte de projet ou un conteneur multimédia nécessite un effet de parallax, 2.5D ou de profondeur d'image superposée.
Rapport de test
A construit la même carte de test à 3 couches de deux manières et les a servies via un serveur http local : la base naïve a empilé toutes les couches au centre sans correction de l'espace colorimétrique, tandis que la version guidée par la compétence — suivant son propre exemple fonctionnel verbatim — a réparti les couches dans la composition diagonale documentée avec un ordre de rendu correct et zéro erreurs de console.
Testé le: 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
Commandes et exemples de prompts
/threejs-parallaxRecette Three.js pour des cartes parallax 2.5D PNG superposées avec dérive souris + défilement.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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