motion-three-r3f

motion-three-r3f

Catalogue généré le 2026-05-11

En une phrase

MotionGuide pratique pour intégrer de la 3D :web avec Three.js +et React Three Fiber.Fiber sans plomber la performance, en maîtrisant la boucle de rendu et les règles de cleanup.

Quand l'utiliser

• VoirQuand laon descriptionveut ci-dessusun ethero laWebGL sectionanimé «sur une landing

Pour allerajouter plusun loinvisuel ».3D interactif (carte, produit, scène) à une page Quand un projet Three.js existant rame ou chauffe le CPU Avant d'attaquer une scène complexe pour valider qu'on a vraiment besoin de 3D Pour structurer proprement une intégration React + Canvas avec gestion du frameloop

Comment l'invoquer

• Slash command : /motion-three-r3f (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— quand un projet implique de la 3D dans le navigateur

Description complètedétaillée

MotionCe skill commence par te poser la question qui sauve : as-tu vraiment besoin de Three.js, ou est-ce qu'une image SVG animée ferait l'affaire ? La 3D web est lourde et la majorité des intégrations gagneraient à être remplacées par autre chose. Si la 3D est justifiée, il passe à la mise en place.

Il configure d'abord la boucle de rendu en mode frameloop="demand" plutôt qu'en rendu permanent : Three.jsla scène ne se redessine que quand quelque chose change, ce qui peut diviser la consommation CPU par dix sur un hero statique. Il centralise la logique d'animation dans un seul useFrame au lieu de multiplier les requestAnimationFrame parallèles. Et il insiste sur le cleanup et le dispose() des géométries/textures au démontage, sinon le navigateur garde tout en mémoire.

Tu repars avec une architecture recommandée pour ton Canvas, des snippets prêts à copier pour frameloop + Reactinvalidate Three+ Fiber. Render loop, frameloop demand, invalidate, useFrame,useFrame, et règlesune checklist perf à dérouler avant la mise en prod. Pour Thymon : c'est le skill à utiliser dès que le mot "WebGL" ou "3D" apparaît dans un brief, pour éviter de perfpartir pourdans heroun WebGL.truc impossible à maintenir.

Pour aller plus loin

Three.js / R3F Motion

Objectif

3D utile + loop maîtrisée + perf.

Procédure

Valider nécessité 3D Loop: setAnimationLoop / frameloop demand + invalidate useFrame unique logique; pas de rAF multiples Cleanup/dispose

Outputs attendus

Archi recommandée Snippets Canvas + frameloop/invalidate + useFrame Checklist perf

Hints

Install: npm install three @react-three/fiber

Source

• Plugin : perso (standalone)
• Nom interne : motion-three-r3f
• Fichier : /home/thymon/.claude/skills/motion-three-r3f/SKILL.md