Accès à l’application verrouillé
Pour obtenir l’accès à ce tutoriel 3D, vous devez d’abord vous abonner à notre chaîne YouTube.
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 jusqu’à 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 entièrement dans le navigateur. Pour une itération la plus rapide possible, ouvrez deux onglets côte à côte :
- Ouvrez le service 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 : Prompt maître de démarrage
Le premier prompt est le plus important. Il définit le cadre pour Gemini et pose 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 librairie 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 rotatif (TorusKnot ou Icosahedron). 2. Importe Three.js et OrbitControls via un lien CDN (unpkg ou cdnjs) dans une balise script. 3. Le code doit être « Single file » – 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 manière procédurale dans le code (MeshStandardMaterial, lumières, couleurs). 5. Ajoute des lumières ponctuelles (PointLight) et des ombres légères. 6. Défini un arrière-plan avec 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 (p. 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 l’objet 3D en rotation. Essayez de cliquer dessus avec la souris et de le faire glisser – grâce à OrbitControls, vous pouvez le faire pivoter !
É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 exigences. Essayez successivement ces messages :
C’est super. Maintenant, change le matériau de l’objet, d’une couleur pleine à un « Wireframe » (modèle filaire) lumineux en bleu et rose néon.
Parfait. Maintenant, ajoute en arrière-plan de la scène un système de particules qui tourne lentement (Points et PointsMaterial) et 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 de problèmes (Debugging)
Lorsque vous modifiez le code en temps réel, l’IA fait parfois une erreur et vous ne voyez sur CodePen qu’un écran noir ou blanc. 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_site_3D.html ». Voilà ! Vous avez votre propre application 3D.