Démarrer un projet Three.js avec Vite

Introduction

Aujourd'hui, nous quittons temporairement l'écosystème React pour plonger dans le cœur de notre sujet : la 3D. Comme convenu, nous allons d'abord maîtriser les bases de la bibliothèque Three.js dans un environnement JavaScript simple, avant de la réintégrer dans React plus tard avec React Three Fiber.

Cette leçon a pour objectif de configurer un projet web moderne avec Three.js et Vite. Nous allons mettre en place notre "atelier de construction" numérique. Étant développeur web, vous êtes déjà familier avec des outils comme npm et le concept de build tools. Nous allons découvrir Vite, un outil moderne qui rend ce processus de configuration particulièrement rapide et agréable.

À la fin de cette leçon, vous aurez un projet vierge, opérationnel, avec un serveur de développement performant, prêt à accueillir votre première scène 3D.

1. Qu'est-ce que Vite et pourquoi l'utiliser ?

Avant de taper la moindre commande, il est important de comprendre quel outil nous allons utiliser. Dans le développement web moderne, on utilise des build tools pour gérer de nombreuses tâches : optimiser le code, gérer les dépendances (les paquets npm), fournir un serveur de développement rapide, etc. Vous avez peut-être déjà utilisé des outils comme Webpack.

Vite (prononcé /vit/) est un outil de cette famille, mais avec une approche qui le rend extrêmement rapide. Plutôt que de reconstruire l'ensemble de votre application à chaque modification, il tire parti des modules ES natifs des navigateurs pour ne mettre à jour que ce qui a changé. Le résultat ? Un démarrage quasi instantané et des mises à jour en temps réel (Hot Module Replacement) très efficaces.

Pour avoir une idée plus claire des avantages de Vite, je vous invite à lire cette courte introduction.

En résumé, en choisissant Vite, nous optons pour un environnement de développement moderne, rapide et simple à configurer, idéal pour nous concentrer sur l'apprentissage de Three.js.

2. Création de votre premier projet Three.js

Passons maintenant à la pratique. Nous allons utiliser npm pour créer un nouveau projet avec le modèle de base de Vite, puis y ajouter Three.js.

La vidéo suivante, également de Grafikart, vous montre exactement la procédure à suivre. Elle est très claire et vous pouvez la suivre pas à pas en parallèle.

À ce stade, si tout s'est bien passé, votre terminal devrait afficher une URL locale (généralement http://localhost:5173). En ouvrant cette adresse dans votre navigateur, vous devriez voir la page d'accueil par défaut de Vite.

3. Comprendre et nettoyer la structure du projet

Maintenant que le projet est créé, ouvrons-le dans votre éditeur de code et analysons sa structure. Vous devriez voir quelque chose de très simple :

• index.html: Le point d'entrée de votre application.
• main.js: Le fichier JavaScript principal où notre code Three.js ira.
• style.css: La feuille de style.
• node_modules/: Le dossier contenant toutes les dépendances, y compris Three.js.
• package.json: Le fichier de configuration de votre projet Node.js.

Une particularité de Vite est que le fichier index.html est à la racine du projet et est considéré comme le véritable point d'entrée, ce qui est assez intuitif.

Pour préparer notre espace de travail, nous allons supprimer le contenu de démonstration.

1. Dans main.js : Supprimez tout le code existant. Le fichier doit être vide.
2. Dans style.css : Supprimez tout le contenu et remplacez-le par ceci. Cela garantira que notre future scène 3D remplira toute la fenêtre du navigateur sans marges indésirables.

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html,
   body {
       overflow: hidden;
   }
   

3. Dans index.html : Supprimez tout ce qui se trouve à l'intérieur de la balise <body>, à l'exception de la balise <script>. Votre <body> devrait ressembler à ceci :

   <body>
     <script type="module" src="/main.js"></script>
   </body>
   

Si votre serveur de développement est toujours en cours d'exécution, votre navigateur affichera maintenant une page complètement blanche. C'est parfait ! C'est notre toile vierge, prête à être peinte en 3D.

Conclusion

Félicitations ! Vous avez franchi une étape fondamentale. Vous ne voyez peut-être qu'une page blanche, mais vous avez mis en place une base de projet solide et moderne, prête pour le développement 3D.

Points clés à retenir :

• Vite est un outil de construction moderne qui offre un serveur de développement extrêmement rapide, idéal pour un flux de travail fluide.
• La commande npm create vite@latest permet d'initialiser rapidement un projet web (nous avons utilisé le modèle Vanilla pour commencer).
• Three.js s'installe comme n'importe quelle autre dépendance npm avec npm install three.
• La structure d'un projet Vite est simple, avec index.html servant de point d'entrée principal.

Aperçu de la prochaine leçon :
Maintenant que notre projet est prêt, la prochaine étape est de donner vie à notre page blanche. Dans la leçon suivante, nous allons initialiser les trois éléments essentiels de toute scène Three.js : la Scène, la Caméra et le Moteur de Rendu (Renderer). Nous transformerons cette page vide en un espace 3D prêt à accueillir des objets.