Compétences threejs-skills
📦

threejs-skills

Sûr

Créez des graphiques 3D et des scènes interactives avec Three.js

La création d'expériences web 3D nécessite de comprendre la configuration de scène, l'éclairage et les modèles de rendu. Cette compétence fournit des modèles Three.js systématiques pour créer du contenu 3D interactif performant.

Prend en charge: Claude Codex Code(CC)
🥉 72 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "threejs-skills". Créez une scène 3D avec une sphère en rotation qui change de couleur au clic

Résultat attendu:

  • Fichier HTML complet avec import CDN Three.js r128
  • Initialisation de scène avec caméra positionnée à z=5
  • SphereGeometry avec 32 segments pour une apparence lisse
  • MeshStandardMaterial avec couleur initiale
  • Configuration d'éclairage ambiant et directionnel
  • Boucle d'animation faisant pivoter la sphère sur les axes x et y
  • Implémentation de raycasting pour la détection de clic
  • Gestionnaire d'événement changeant la couleur du matériau à l'intersection
  • Gestionnaire de redimensionnement de fenêtre pour un canvas responsive

Utilisation de "threejs-skills". Construisez un champ de particules qui s'écoule vers la caméra

Résultat attendu:

  • BufferGeometry avec 2000 particules utilisant Float32Array
  • Positions initiales aléatoires réparties dans l'espace 3D
  • PointsMaterial avec couleur blanche et taille 0.02
  • Boucle d'animation mettant à jour les positions z à chaque frame
  • Réinitialisation de position quand les particules dépassent le seuil de caméra
  • Modèle de dispose approprié pour le nettoyage
  • Optimisation de performance 60fps fluide

Audit de sécurité

Sûr
v1 • 2/25/2026

This skill contains documentation-only content (SKILL.md) teaching Three.js 3D graphics development. All 82 static analysis findings are false positives: backtick characters are Markdown code block delimiters, not shell execution; URLs are CDN resource references for the Three.js library; cryptographic warnings are pattern mismatches on version numbers and documentation text. No executable code, no network calls, no command injection vectors exist in this educational content.

1
Fichiers analysés
655
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
34
Communauté
100
Sécurité
96
Conformité aux spécifications

Ce que vous pouvez construire

Visualisation Interactive de Produits

Créez des affichages 3D de produits que les utilisateurs peuvent faire pivoter, zoomer et explorer directement dans leur navigateur.

Tableau de Bord de Visualisation de Données

Transformez des ensembles de données complexes en graphiques 3D immersifs, diagrammes et représentations spatiales.

Contenu Éducatif 3D

Construisez des modèles interactifs pour enseigner l'anatomie, l'astronomie, l'architecture ou des concepts d'ingénierie.

Essayez ces prompts

Configuration de Scène 3D de Base 
Créez une scène Three.js de base avec un cube en rotation. Incluez la configuration de scène, la caméra, le rendu avec antialiasing, une géométrie de cube colorée, l'éclairage et une boucle d'animation. Ajoutez la gestion du redimensionnement de fenêtre.
Sphère Interactive avec Contrôles de Souris 
Construisez une sphère 3D interactive qui répond aux mouvements de souris. Implémentez des contrôles de caméra personnalisés (glisser pour pivoter, molette pour zoomer) sans OrbitControls. Utilisez MeshStandardMaterial avec un éclairage approprié.
Animation de Système de Particules 
Générez un système de particules avec 1000+ particules utilisant BufferGeometry. Ajoutez une animation pour que les particules se déplacent ou pivotent au fil du temps. Incluez des bonnes pratiques de performance comme la disposition de géométrie et de matériau.
Sélection d'Objet par Raycasting 
Implémentez le raycasting pour détecter les clics et survols de souris sur des objets 3D. Au survol, redimensionnez l'objet et changez le style du curseur. Au clic, changez la couleur de l'objet. Incluez un tableau d'objets cliquables.

Bonnes pratiques

  • Utilisez toujours Three.js r128 CDN pour la compatibilité des artefacts et vérifiez la disponibilité des fonctionnalités
  • Ajoutez des gestionnaires de redimensionnement de fenêtre pour mettre à jour le rapport d'aspect de la caméra et les dimensions du rendu
  • Disposez des géométries, matériaux et textures lors de la suppression d'objets pour éviter les fuites de mémoire

Éviter

  • Utiliser OrbitControls ou des imports d'addon qui ne sont pas disponibles sur le CDN r128
  • Utiliser CapsuleGeometry qui nécessite r142 ou des versions ultérieures
  • Oublier d'ajouter des lumières lors de l'utilisation de matériaux éclairés comme MeshStandardMaterial

Foire aux questions

Pourquoi cette compétence utilise-t-elle Three.js r128 spécifiquement ?
La version r128 est la version CDN la plus stable compatible avec les environnements d'artefacts. Les fonctionnalités plus récentes nécessitent des outils de build npm.
Puis-je utiliser OrbitControls avec cette configuration ?
Non, OrbitControls nécessite un import depuis le dossier examples qui n'est pas disponible sur CDN. Cette compétence enseigne plutôt l'implémentation de contrôles de caméra personnalisés.
Comment ajouter des modèles 3D personnalisés comme des fichiers GLTF ?
Le chargement GLTF nécessite l'addon GLTFLoader depuis npm. Pour les projets en CDN uniquement, créez la géométrie de manière programmatique en utilisant BufferGeometry ou des formes primitives.
Pourquoi ma scène 3D affiche-t-elle un écran noir ?
Les causes courantes incluent : objets non ajoutés à la scène, caméra mal positionnée, appels renderer.render() manquants, ou utilisation de matériaux éclairés sans lumières.
Quel est le nombre maximum de particules que je devrais utiliser ?
Commencez avec 1000-5000 particules pour des performances 60fps fluides. Testez sur les appareils cibles et réduisez le nombre si le taux de rafraîchissement diminue.
Comment rendre mes objets 3D plus réalistes ?
Utilisez MeshStandardMaterial avec une configuration d'éclairage appropriée, activez l'antialiasing du rendu, ajoutez des ombres avec shadowMap.enabled, et appliquez un tone mapping approprié.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-skills

Réf

main

Structure de fichiers

📄 SKILL.md