Démo web 3D : un essaim de mini-drones décolle d'une aire au sol et se place en formation (cube, sphère, pyramide, spirale, tore, logo « A », œil, texte), avec un mode course sur circuit. Moteur Three.js, bundlé avec Vite.
▶ Démo en ligne : https://monkeydalex.github.io/Simulation-Drone/
- 8 formations, dont du texte personnalisé (10 caractères) et un œil aux couleurs d'iris au choix
- Vol réaliste : les drones s'inclinent dans le sens du mouvement (25° maximum), flottent légèrement en vol stationnaire, et leurs hélices tournent
- Espacement de sécurité : aucun drone ne chevauche son voisin, quelle que soit la formation
- Reconfigurations chorégraphiées : départ en vague et couloirs d'altitude pour limiter les croisements
- Décollage de l'essaim depuis une grille au sol au lancement
- Cadrage automatique : la caméra englobe chaque formation, centrée dans la zone non masquée par le panneau
- 20 à 100 drones, vitesse réglable, traînées et ombres optionnelles, capture PNG
- Mode course : 5 drones nommés, réalisation TV automatique ou caméra embarquée
- Node.js 22 ou plus récent
- pnpm
pnpm install
pnpm dev # serveur de développement Vite
pnpm test # tests unitaires (node --test)
pnpm build # build de production dans dist/
pnpm preview # sert le build| Touche | Action |
|---|---|
| Espace | Pause / reprise de la simulation |
| P | Afficher ou masquer le panneau |
| R | Réinitialiser la caméra |
| C | Télécharger une capture PNG de la scène |
| Échap | Quitter le mode course |
(Les raccourcis ci-dessus sont ignorés lorsque vous tapez dans un champ texte ou une liste ; pendant une course, seul Échap est actif.)
Le bouton RACE lance une course sur circuit entre 5 drones nommés (couloirs séparés, aspiration, freinage en virage). Deux caméras sont commutables pendant la course depuis l'overlay : Réalisation (régie automatique à plans coupés : poursuite, bord de piste, hélicoptère) et Embarquée (accrochée à un drone ; cliquer à nouveau pour changer de drone). Le classement affiche les écarts en temps réel ; l'écran d'arrivée propose de rejouer.
Si le système signale « réduire les mouvements » (prefers-reduced-motion), les transitions entre formations sont raccourcies.
├── index.html # Entrée HTML (Vite)
├── vite.config.js
├── package.json
├── css/style.css
├── src/
│ ├── main.js # UI, raccourcis, HUD course
│ ├── simulator.js # Scène, boucle, transitions, décollage, cadrage, ombres
│ ├── constants.js # Constantes partagées (capacité, texte, sol)
│ ├── formations.js # Génération des positions par formation (+ build normalisé)
│ ├── spacing.js # Espacement de sécurité entre drones
│ ├── drone.js # État d'un drone (position, cible, attitude de vol)
│ ├── droneSwarm.js # Rendu instancié de l'essaim (InstancedMesh)
│ ├── droneAssets.js # Géométries, matériaux et texture d'hélice partagés
│ ├── environment.js # Décor : grille néon + champ d'étoiles
│ └── race/
│ ├── raceMode.js # Orchestration de la course (IA, tours, classement)
│ ├── racer.js # Un drone de course (couloir, traînée, roulis)
│ ├── raceTrack.js # Circuit, courbure, décor de piste
│ └── raceCamera.js # Réalisation caméra (régie / embarquée)
├── tests/ # Tests unitaires (formations, espacement, attitude)
└── docs/ # Audit du 16/07/2026, plan d'amélioration du 27/09/2026
- Navigateur récent avec WebGL 2
ISC.