GratuitVidéo
Fenêtre d'application et zoom
- 365365 téléchargements
- 125125 mentions J'aime
- 188188 sauvegardes
Compatible avec
+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Animation 3D fluide avec Three.js v1.0.0
Utilisez cette ressource pour animer une scène 3D web de façon fluide et sans fuite de mémoire
Nouveau
- 411 téléchargements
- 175 mentions J'aime
- 176 sauvegardes
4,49 €
Accès à vie à cette ressource, avec ses mises à jour.
Installer avec la CLI
Dans un terminal, depuis le dossier voulu :
npx --yes palatekit@latest install threejs-motion-and-cleanupSans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.
Première fois : connectez la CLI avec
npx --yes palatekit@latest loginL'agent construit une scène avec boucle de rendu indépendante de la fréquence d'images, lit et enchaîne des animations GLTF, lie la caméra au défilement et affiche des milliers d'objets par instanciation. Il livre un fichier HTML unique reproductible, qu'il vérifie par captures à plusieurs instants, et libère correctement les ressources GPU.
Mise à jour le 2 novembre 2026
Aperçus
Caractéristiques
- Fonctionne dans
- Guides d'installation
- Génère avec
- Three.js
- Utilise
- Navigateur avec WebGL
- Playwright (facultatif, pour les captures)
- Licence
- MIT
Ressources similaires
Tout voir- Gratuit
GratuitVidéo
Un seul grand chiffre
- 463463 téléchargements
- 223223 mentions J'aime
- 100100 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
PalateKit Motion, la bibliothèque
- 338338 téléchargements
- 198198 mentions J'aime
- 249249 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Trois barres face à face
- 348348 téléchargements
- 133133 mentions J'aime
- 182182 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Avant / après au curseur
- 322322 téléchargements
- 248248 mentions J'aime
- 238238 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Carrousel de trois cartes
- 418418 téléchargements
- 157157 mentions J'aime
- 101101 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Échange en bulles
- 564564 téléchargements
- 127127 mentions J'aime
- 161161 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
PROVidéo
Liste qui se coche
- 442442 téléchargements
- 233233 mentions J'aime
- 160160 sauvegardes
Compatible avec+ HyperFrames- Claude Code
- Codex
- Cursor
- et 3 autres
Ce que vous obtenez
- SKILL.md traduit en français : boucle, GLTF, caméra, instanciation, R3F, performance, libération, livraison et vérification
- references/r3f-and-perf.md et references/resource-disposal.md : motifs R3F, post-traitement et utilitaire de libération complet
- README.md de présentation
Pour qui
- Créer un hero 3D animé pour une page de lancement
- Lier une caméra 3D au défilement de la page
- Corriger une scène qui consomme de plus en plus de mémoire
Pas pour qui
- Un site sans aucun besoin de 3D
- Du jeu vidéo avec physique
- Un projet sans navigateur
Étiquettes
- threejs
- webgl
- 3d
- animation
- performance
À propos
Vous dites
« Fais un hero 3D avec un solide qui tourne lentement et une caméra qui descend quand on fait défiler la page, dans un seul fichier HTML. »
Skill publiée par iart-ai sous licence MIT, traduite par PalateKit.
Voir plusVoir moins
Prérequis
- À préparer
- Une description de la scène et du mouvement et Vos modèles GLB le cas échéant
- Dépendances
- Navigateur avec WebGL et Playwright (facultatif, pour les captures)
Comment l'utiliser
- Décrivez la scène et le mouvement voulu
- L'agent écrit le HTML et vérifie des images à différents instants
- Ouvrez le fichier et ajustez, en vérifiant le respect de prefers-reduced-motion
Aperçu du contenu
Fichiers
- LICENSE1 Ko
- NOTICE-PALATEKIT.md0,5 Ko
- README.md0 Ko
- references/r3f-and-perf.md8,1 Ko
- references/resource-disposal.md13,8 Ko
- SKILL.md15,3 Ko
Origine et licence
Modifié par PalateKit
- Auteur
- iart-ai
- Source
- github.com/iart-ai/webgl-animation-skills/tree/50697d659fbf70152f48f9f8aadf1efe78bbdde1/skills/threejs-animation
- Licence
- MIT
Notice
Version modifiée de « threejs-animation » (iart-ai, MIT) : traduction française et fiche par PalateKit.
Avis des utilisateurs
–
Aucune note pour l'instant
Chargement des avis…
Questions fréquentes
Le dossier mentionne un dossier scripts/. Est-il nécessaire ?
Non. Ces aides servent seulement à capturer des images de contrôle ; la skill fonctionne sans, avec une commande Playwright indiquée dans le texte.
Fonctionne-t-elle avec React ?
Oui, la skill couvre React Three Fiber (useFrame, ScrollControls, libération au démontage).