Simulation de Drones en Formation

Démo web 3D : essaim de mini-drones qui se placent en formation (cube, sphère, pyramide, spirale, tore, logo « A », œil, texte), avec un mode course sur circuit. Moteur Three.js, bundlé avec Vite.

Prérequis

• Node.js 18+ (recommandé)

Lancer en local

npm install
npm run dev

Ouvrez l’URL indiquée dans le terminal (souvent http://localhost:5173).

Build de production :

npm run build
npm run preview

Raccourcis clavier

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.)

Mode course

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). Le classement affiche les écarts en temps réel ; l'écran d'arrivée propose de rejouer.

Accessibilité mouvement

Si le système signale « réduire les mouvements » (prefers-reduced-motion), les transitions entre formations sont raccourcies.

Structure du projet

├── 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, essaim, ombres
    ├── constants.js      # Constantes partagées (capacité, longueur de texte)
    ├── formations.js     # Génération des positions par formation
    ├── drone.js          # État d'un drone (position/cible)
    ├── droneSwarm.js     # Rendu instancié de l'essaim (InstancedMesh)
    ├── droneAssets.js    # Géométries et matériaux partagés d'un drone
    ├── 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)

Exigences techniques

• Navigateur récent avec WebGL
• Three.js est installé via npm (plus de dépendance CDN en dev)