RushExit - Jeu Rush Hour en Three.js
Développement solo d'un jeu Rush Hour en 3D avec Three.js : plateau et pièces simples modélisés from scratch, voitures en assets externes, logique de déplacement au clic et aux flèches, back office EasyAdmin pour gérer niveaux, joueurs et scores.
- Date
- Avr. - Juin 2026
- Section
- Projets IUT
Compétences démontrées
- Développer
Contexte
Dans le cadre d'un projet du 6ème semestre, j'ai développé seule une version 3D du jeu Rush Hour avec Three.js. L'objectif était de livrer un jeu jouable avec un back office permettant de créer des niveaux et de suivre les scores. C'était ma première expérience avec Three.js et la 3D en général.
Objectifs
- Implémenter la logique du jeu Rush Hour (déplacements contraints, détection de blocage, condition de victoire).
- Modéliser et afficher une scène 3D avec Three.js.
- Développer une interface de jeu intuitive (sélection au clic, déplacement aux flèches).
- Créer un back office avec EasyAdmin pour gérer les niveaux, les joueurs et les scores.
Découverte de Three.js et modélisation 3D
Première plongée dans la 3D
Three.js a représenté une rupture complète avec mon environnement de développement habituel. Comprendre les concepts de base : scène, caméra, lumières, matériaux, géométries, a demandé un temps d'adaptation significatif. J'ai modélisé from scratch les éléments géométriques simples du jeu : le plateau, les cases, les bordures, en utilisant les primitives Three.js (BoxGeometry, PlaneGeometry).
Le blocage Blender
Pour les voitures, j'ai rapidement atteint mes limites : modéliser des formes complexes directement dans Three.js sans passer par un logiciel de modélisation 3D n'était pas réaliste dans le temps imparti. Me lancer dans l'apprentissage de Blender en parallèle du reste du projet n'était pas réaliste non plus, vu la courbe d'apprentissage. J'ai donc fait le choix pragmatique d'importer des assets externes pour les véhicules, ce qui m'a permis de me concentrer sur la logique de jeu et l'interaction.
Logique de jeu et interactions
J'ai implémenté la logique complète du jeu : détection des pièces sélectionnables, calcul des déplacements autorisés selon l'axe de chaque véhicule, détection des collisions entre pièces et condition de victoire. L'interaction se fait en deux temps : clic pour sélectionner une voiture, flèches directionnelles pour la déplacer, ce qui nécessitait de gérer proprement l'état sélectionné et les contraintes de mouvement en temps réel dans la scène 3D.
Back office EasyAdmin
Le back office, accessible à api.rush.alicedr.com/admin, est développé avec Symfony et EasyAdmin. Il permet de créer et configurer des niveaux (position et orientation des véhicules sur la grille), de consulter la liste des joueurs et de suivre leurs scores. C'est une partie plus familière pour moi, qui m'a servi de zone de confort pendant que je débogais la partie Three.js.
Conclusion
RushExit est le projet qui m'a le plus sortie de ma zone de confort : la 3D, la physique des interactions dans un espace tridimensionnel, la gestion d'une scène en temps réel : tout était nouveau. Le choix d'importer des assets pour les voitures plutôt que de bloquer sur Blender est un arbitrage que j'assume : dans un projet solo avec une deadline, savoir identifier ce qu'on peut apprendre maintenant et ce qu'on délègue est aussi une compétence. Ce projet m'a donné envie d'aller plus loin avec Three.js sur des projets personnels.