Plan en temps réel : sites 3D avec Gemini
Oubliez les générateurs de prompts. Voici un plan interactif complet, étape par étape. D’un chat vide à une expérience 3D interactive – uniquement grâce à une conversation avec une intelligence artificielle en temps réel.
Étape 1 : Préparation de l’environnement
Vous n’avez rien à installer sur votre ordinateur. Tout le processus se déroulera directement dans le navigateur. Pour itérer le plus rapidement possible, ouvrez deux onglets côte à côte :
- Ouvrez le Google Gemini gratuit (gemini.google.com).
- Ouvrez l’éditeur de code en ligne CodePen.io ou PlayCode.io. Nous y testerons immédiatement le code généré, sans avoir à créer ni enregistrer de fichiers HTML.
Étape 2 : Master‑prompt de démarrage
Le premier prompt est le plus important. Il définit le cadre pour Gemini et fixe la base technologique (Three.js depuis un CDN, tout dans un seul fichier). Copiez ce texte et collez‑le dans Gemini :
Tu es un expert en WebGL et en bibliothèque Three.js. Ta tâche est d’écrire un code HTML complet (y compris le CSS et le JS à l’intérieur) pour une scène 3D fonctionnelle. Exigences : 1. Crée au centre un objet 3D en rotation (TorusKnot ou Icosahedron). 2. Importe Three.js et OrbitControls via un lien CDN (unpkg ou cdnjs) dans une balise script. 3. Ce doit être un « fichier unique » – tout dans un seul bloc de code, sans import maps. 4. N’utilise pas de modèles externes (GLTF) ni de textures (JPG/PNG). Crée tout de façon procédurale dans le code (MeshStandardMaterial, lumières, couleurs). 5. Ajoute des lumières ponctuelles (PointLight) et des ombres douces. 6. Définis l’arrière-plan sur une couleur très sombre.
Étape 3 : Lancement et vérification
Une fois que Gemini a généré le code, copiez‑le en haut à droite dans le cadre du code. Passez au deuxième onglet (par ex. CodePen) et collez tout le code UNIQUEMENT dans le champ HTML (laissez les champs CSS et JS vides, notre code contient déjà tout).
Astuce : Vous verrez immédiatement un objet 3D en rotation. Essayez de cliquer dessus avec la souris et de le faire glisser – grâce à OrbitControls, vous pouvez le faire tourner !
Étape 4 : Itérations en temps réel
C’est maintenant que commence le vrai travail en temps réel. Retournez dans Gemini. Il n’est pas nécessaire d’écrire un nouveau code ni de lui renvoyer l’ancien (il s’en souvient). Il suffit de discuter avec lui et d’ajouter progressivement des demandes. Testez successivement ces messages :
C’est super. Maintenant, change le matériau de l’objet, d’une couleur unie à un « wireframe » lumineux (modèle filaire) en bleu et rose néon.
Parfait. Maintenant, ajoute en arrière‑plan de la scène un système de particules en rotation lente (Points et PointsMaterial) qui simulera des étoiles dans l’espace.
Excellent. Et maintenant, fais en sorte que lorsque je bouge la souris, les couleurs des lumières commencent à changer en douceur en fonction de la position du curseur sur l’écran.
Étape 5 : Résolution des problèmes (debugging)
Lorsque vous modifiez le code en temps réel, l’IA fait parfois une erreur et vous ne verrez qu’un écran noir ou blanc sur CodePen. Vous n’avez pas besoin de connaître la programmation, il suffit de décrire le problème dans le chat :
Le dernier code que tu as envoyé ne fonctionne pas. L’écran est complètement noir et rien ne tourne. Vérifie que tu as bien chargé OrbitControls et que la caméra n’est pas à l’intérieur de l’objet. Essaie de corriger cela et envoie‑moi toute la version corrigée.
C’est fait ! Enregistrement du projet
Une fois que vous êtes satisfait à 100 % du résultat, copiez le dernier code fonctionnel depuis CodePen. Sous Windows, ouvrez le Bloc‑notes (Notepad) ou sur Mac TextEdit, collez le code et enregistrez le fichier sous le nom « mon_web_3D.html ». Et voilà ! Vous avez votre propre application 3D.