Un seul prompt pour un site web 3D en 30 secondes (6 testés)

La plupart des bibliothèques de prompts pour sites web 3D facturent soit le texte du prompt lui-même, soit vous montrent une vidéo de démonstration et gardent les mots pour elles. Voici six prompts complets : collez-les tels quels dans Claude, ou adaptez une ligne pour Lovable, Bolt et Cursor. Les six ont été testés sur un modèle en direct ; cinq sont revenus sous forme de pages Three.js fonctionnelles, et chaque capture d’écran ci-dessous est l’un de ces rendus, pas une maquette.

Six prompts de site web 3D que vous pouvez copier dès maintenant

Chaque prompt demande une page HTML à fichier unique avec Three.js chargé depuis un CDN. Cette contrainte est importante : un seul fichier s’ouvre localement dans n’importe quel navigateur et se transmet facilement à un développeur ou se colle dans un bloc de code personnalisé, et elle oblige le modèle à garder la scène autonome au lieu de disperser les imports dans tout un projet.

1. Héros de la galaxie de particules

Créez une page HTML à fichier unique avec un en-tête galaxie de particules 3D interactif
utilisant Three.js (chargez-le depuis un CDN). Exigences : environ 50 000
particules formant une galaxie spirale qui tourne lentement ; les couleurs des particules passent
du ambre chaud au centre au violet sur le bord extérieur ; ajoutez OrbitControls afin que
les visiteurs puissent faire glisser pour faire pivoter et zoomer ; superposez un titre principal centré qui
dit "Build Beyond Flat" avec une courte sous-ligne et un bouton CTA ; définissez
pointer-events: none sur le conteneur de superposition et pointer-events: auto sur
le bouton CTA afin que la galaxie reste déplaçable derrière le texte ; arrière-plan sombre
#0a0616 ; gérez le redimensionnement de la fenêtre. Répondez UNIQUEMENT avec le fichier HTML complet
dans un seul bloc de code.

Généré en 27 secondes et 3 692 jetons de sortie. La galaxie tourne, le glisser-pour-orbiter fonctionne, et le bouton reste cliquable à travers la superposition. Un vrai défaut : le sous-titre se pose sur le noyau galactique lumineux et est difficile à lire. La correction se trouve dans les notes de test ci-dessous.

2. Vitrine de produit pilotée par le défilement

Créez une page HTML à fichier unique : une vitrine de produit 3D pilotée par le défilement utilisant
Three.js chargé depuis un CDN. Exigences : un nœud en torus chromé flottant
centré dans un canvas plein écran fixe ; la page comporte 4 sections de défilement
plein écran, et lorsque l’utilisateur fait défiler, la caméra orbite autour de l’objet d’un
360 degrés complet tandis que la couleur du matériau de l’objet se transforme en douceur par section
(argent, bleu profond, émeraude, cuivre) ; chaque section affiche un titre et
un texte d’une ligne épinglés à gauche au-dessus du canvas ; interpolation fluide (lerp)
au défilement pour que le mouvement paraisse amorti ; ambiance studio sombre avec deux projecteurs colorés
et une ombre douce au sol ; gérer le redimensionnement. Sortie UNIQUEMENT du fichier HTML complet
dans un seul bloc de code.

C’était la plus lourde des cinq générations de travail (63 secondes, 7 023 jetons de sortie) et le résultat le plus impressionnant. Le défilement fait tourner la caméra autour de l’objet, et le matériau se recolore par section exactement comme demandé :

L'interpolation lerp amortie a également été respectée ; le mouvement a la sensation lourde et coûteuse d'un site d'agence plutôt que celle d'un diaporama à défilement détourné.

3. Fond d'arrière-plan dégradé fluide GLSL

Créez une page HTML à fichier unique avec un arrière-plan animé en plein écran en WebGL, en dégradé fluide,
utilisant un shader de fragment GLSL personnalisé avec Three.js chargé
depuis un CDN. Exigences : des amas organiques à déplacement lent mêlant bleu profond,
violet et corail, pilotés par une variable uniforme de temps et un bruit de type simplex dans le
shader de fragment ; ajoutez un grain de film subtil dans le shader ; superposez une carte en verre centrée (flou d’arrière-plan)
avec un titre blanc « Ship Immersive Sites », une
sous-ligne et deux boutons ; l’animation doit rester fluide sur un ordinateur portable (quad unique, aucun passage de post-traitement) ; gérer le redimensionnement. Produisez UNIQUEMENT le fichier HTML complet
dans un seul bloc de code.

31 secondes, 3 830 tokens, réussite au premier essai. La ligne « single quad, no postprocessing passes » est la limite de performance : sans elle, les modèles ont tendance à recourir à EffectComposer et à des passes de bloom qui font chuter les fréquences d’images sur les GPU intégrés.

4. Parcours immersif d’un portfolio 3D (celui qui s’est rebiffé)

Créez une page HTML à fichier unique : un portfolio 3D utilisant Three.js depuis un CDN.
Six cartes de projet flottantes (plans arrondis avec des textures dégradées
factices et des titres de projet rendus sur la texture de la carte) disposées le long
d’une courbe douce dans l’espace 3D. Lorsque l’utilisateur fait défiler la page, la caméra avance
le long de la courbe, mettant chaque carte au point focal une à une ; la caméra
doit garder la carte focalisée entièrement dans le cadre avec une marge confortable et ne jamais
traverser une carte ; la carte focalisée s’agrandit légèrement. Les cartes voisines
restent partiellement visibles pour donner de la profondeur. Ajoutez un brouillard subtil, un fond sombre, une interpolation de défilement amortie. Cliquer sur une carte focalisée ouvre un lien. Gérez le redimensionnement.
Gardez le code compact : réutilisez une seule fonction de création de carte, sans commentaires.
Ne sortez QUE le fichier HTML complet dans un seul bloc de code.

Cela a nécessité trois essais et reste malgré tout pas prêt à être livré, et la capture d’écran ci-dessus montre pourquoi nous le publions quand même : la carte s’affiche, mais la caméra se place derrière, donc le titre apparaît en miroir. Le premier essai a dépassé notre limite de sortie de 16 000 tokens au milieu du fichier. Le deuxième (avec la ligne « keep the code compact », c’est pourquoi cette ligne figure dans le prompt) a bien affiché les cartes mais a fait traverser la caméra directement à travers elles. Le troisième a corrigé le clipping et a perdu le couplage du défilement de la caméra. La chorégraphie du parcours de la caméra plus les textures par carte est réellement plus difficile pour les modèles que les scènes ci-dessus ; prévoyez une séance de débogage, ou simplifiez en une grille courbe statique avec des états de survol.

5. Visionneuse de produit interactive

Créez une page HTML autonome : une visionneuse de produit 3D interactive utilisant
Three.js depuis un CDN. Centrez un substitut de produit géométrique stylisé, sans fil de fer
(un cube chanfreiné ou une capsule) sur un socle. Panneau latéral droit avec
trois échantillons de couleur et un commutateur métal/mat qui mettent à jour le matériau en temps réel ;
OrbitControls limité à la rotation horizontale ; éclairage doux de studio à trois points
et une ombre de contact. Conservez le panneau en simple HTML/CSS superposé au
canvas. Gérez le redimensionnement. Affichez UNIQUEMENT le fichier HTML complet dans un seul bloc de code.

Réussite au premier essai, 66 secondes, 7 719 tokens. Les échantillons et le commutateur métal/mat mettent à jour le matériau en direct, et le modèle a ajouté une attention non sollicitée : une note de bas de page expliquant que la rotation est verrouillée sur l’axe horizontal afin de garder le produit cadré.

6. Site d'entreprise 3D d'une seule page

Créer une page HTML en un seul fichier : un site d’une page pour un studio de design avec
Three.js depuis un CDN. Sections : hero, services, work, contact. Une seule
forme abstraite low-poly flotte en haut à droite du hero et tourne lentement ;
au fur et à mesure que l’utilisateur fait défiler chaque section, la forme transforme son échelle et sa couleur
pour correspondre à la couleur d’accent de cette section. Les sections utilisent par ailleurs un HTML/CSS épuré
(pas de 3D lourde par section) afin que la page reste rapide. Défilement fluide, compatible mobile,
gestion du redimensionnement. Sortir UNIQUEMENT le fichier HTML complet dans un seul
bloc de code.

62 secondes, 7 419 tokens. Le modèle a inventé un nom de studio, construit les quatre sections et placé un icosaèdre low-poly exactement à l’endroit demandé. Notre première tentative avec ce prompt a atteint une limite de sortie de 8 000 tokens et est arrivée tronquée — si vous appelez un modèle via une API, fixez la limite de sortie à 16 000 tokens ou plus pour les prompts d’une page entière.

Que s'est-il passé quand nous les avons exécutés

Trois exécutions sur un seul modèle par prompt relèvent de l’anecdote, pas du benchmark ; il faut les lire comme un contrôle ponctuel de l’état de la génération prompt-vers-3D à la mi-2026. Notes méthodologiques : claude-sonnet-5 via son API le 17 juillet 2026, paramètres par défaut, aucun prompt système, résultats rendus dans Chrome sur desktop en 1280×720 sur un MacBook Apple silicon ; lors des exécutions réussies, le modèle a choisi de lui-même la version UMD Three.js r128 depuis un CDN public.

Le seul défaut visuel parmi les cinq pages fonctionnelles : la sous-ligne de l'invite 1 se trouve sur la partie la plus lumineuse de la galaxie et devient presque illisible. Une ligne de suivi l’a corrigé — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. C’est le schéma qui ressort de ces exécutions : la scène 3D elle-même a tendance à être correcte, et le budget d’itérations va à la typographie, au contraste des superpositions et (dans le cas du portfolio) à la chorégraphie de la caméra.

Le coût n’est pas un problème à cette échelle. L’exécution complète des tests — neuf générations, y compris les nouvelles tentatives du portfolio, environ 46 000 tokens de sortie — a coûté bien moins d’un dollar ; nous l’avons exécutée via AIReiter, qui revend l’accès à l’API Claude à un cinquième du prix officiel par token, de sorte que même une session d’itération obstinée reste dans l’ordre de la petite monnaie.

Comment rédiger votre propre prompt de site web 3D

Les prompts qui ont réussi partagent cinq parties. Conservez les cinq et vos chances de réussite du premier coup augmentent fortement.

1. Un seul sujet de scène. Une galaxie, un nœud toroïdal, un champ de gradient. Dans nos exécutions et dans la plupart des exemples partagés par la communauté, les prompts qui demandent plusieurs éléments 3D sans lien entre eux dans une seule page sont ceux où les modèles commencent à omettre des exigences. 2. Un moteur de mouvement. Soit le temps (slowly rotates, driven by a time uniform), soit le défilement (as the user scrolls, the camera orbits). Indiquez explicitement lequel ; « animated » seul laisse le modèle choisir quelque chose d’ennuyeux. Remarque tirée de l’échec du portfolio : faire dépendre un objet du défilement est fiable, faire dépendre une caméra le long d’un chemin entre des objets du défilement est l’endroit où tout casse. 3. L’interaction. OrbitControls pour faire glisser et faire pivoter a fonctionné à chaque exécution réussie de notre test. Si vous superposez du texte sur le canvas, demandez pointer-events: none sur le conteneur de superposition et pointer-events: auto sur les boutons — sinon la couche de texte capte les glissements et les clics destinés à la scène. 4. Le contenu de la superposition. Donnez le texte exact du titre entre guillemets. Les modèles remplissent les textes non spécifiés avec des slogans génériques que vous devrez de toute façon remplacer. 5. Garde-fous de performance et de taille. Le nombre de particules, single quad, no postprocessing, ou low-poly maintient la page rapide ; keep the code compact maintient la sortie dans les limites de jetons de l’API — deux de nos neuf exécutions ont échoué à cause d’une limite de sortie avant même qu’un problème de qualité du code n’apparaisse.

Vocabulaire qui pousse le modèle vers une vraie 3D plutôt qu’une imitation CSS plate : Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Les mots comptent parce qu’ils correspondent à de vrais noms d’API, donc le modèle écrit en s’appuyant sur des bibliothèques qu’il a vues pendant l’entraînement au lieu d’improviser.

Le raccourci de collage de code

Pour des effets qui vont au-delà de ce que vous pouvez décrire, il existe une deuxième technique. Trouvez un effet Three.js abouti sur CodePen, collez le code brut dans votre outil d’IA, et demandez simplement Add this 3D animation to the hero. Le modèle traduit l’extrait dans votre stack — composants React, votre configuration de build, la structure de votre section — ce qui est généralement la partie fastidieuse. Builder.io a documenté l’astuce avec une animation de planète de 50 000 particules, incluant la même correction de superposition pointer-events: none, dans leur guide.

C’est l’approche la plus efficace lorsque vous voulez une finition digne d’un site primé : le calcul du shader provient d’un humain qui l’a peaufiné, et l’IA ne fait que l’intégration.

Quels outils prennent en charge ces invites

Les six prompts ci-dessus sont indépendants de l’outil ; tout outil qui écrit et prévisualise du HTML/JS peut les exécuter. Là où les outils diffèrent, c’est dans le format de sortie et la propriété du code (vérifié le 17 juillet 2026) :

Deux d’entre eux méritent une mention. Le principe de VULK est qu’il génère du vrai code React Three Fiber — des scènes WebGL interactives plutôt qu’un en-tête vidéo en boucle — et ses sites de démonstration le prouvent. Un résultat en code réel plutôt qu’un en-tête vidéo est exactement la distinction à vérifier avant de payer pour un « AI 3D website builder ». Et si vous préférez parcourir des prompts plutôt que les rédiger, MotionSites propose une bibliothèque classée par catégories destinée à Lovable, Bolt, Cursor et Claude. Une partie est gratuite à copier, le reste est réservé aux abonnés :

Là où les prompts atteignent leur limite

Une question récurrente dans les fils r/lovable et r/web_design est de savoir si le bon prompt peut reproduire des sites comme mont-fort.com ou les pages labs de Noomo Agency. Réponse honnête : pas à partir d’un prompt seul. Ces sites sont construits sur des modèles GLTF personnalisés, un éclairage dirigé artistiquement et un travail de shaders sur mesure — des assets qu’un prompt textuel ne peut pas faire apparaître. Un prompt vous donne la *mécanique* de ces sites (caméras pilotées par le scroll, arrière-plans shader, mouvement amorti) avec une géométrie factice. Remplacer cela par un vrai fichier de modèle comble une partie de l’écart, mais l’éclairage, les matériaux et les solutions de repli pour mobile restent un véritable travail de design. Notre échec de survol de portfolio ci-dessus illustre la même leçon en miniature : plus un prompt se rapproche de scènes chorégraphiées à objets multiples, plus il faut d’itérations humaines.

Trois modes d'échec couvrent la plupart des générations défaillantes, chacun avec une correction en une ligne :

• Écran noir, aucune erreur visible. Généralement, une incompatibilité d’import entre ES module et CDN. Invite de correction : Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128 est la version que nos tests ont choisie sans instruction, et elle fonctionne toujours ; les versions plus récentes de Three.js ont abandonné le chemin UMD, donc le fait de verrouiller la version évite l’incompatibilité.)
• Fluid sur ordinateur, saccadé sur les téléphones. Des volumes de particules qui allaient bien sur un ordinateur portable. Invite de correction : Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• La scène 3D fonctionne mais rien sur la page n’est cliquable. Le canevas ou un calque superposé intercepte les événements. Invite de correction : Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

Et voici un exemple tiré de nos propres tests : le texte sur une carte 3D s’affiche en miroir. La caméra regarde la face arrière du plan. Prompt de correction : Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

FAQ

Existe-t-il des prompts de sites web 3D gratuits ?

Oui. Les six de cet article sont complets et libres à copier, et DocsBot ainsi que l’offre gratuite de MotionSites en proposent davantage. Les bibliothèques payantes vous achètent surtout du volume et une variété déjà testée, pas un autre type de prompt.

Ces invites fonctionnent-elles dans Lovable ou Bolt ?

Oui, avec un ajustement : abandonnez l’exigence de « single-file HTML », puisque ces plateformes génèrent des projets React. Conservez tout le reste — le sujet de la scène, le moteur du mouvement, l’interaction et la garde-fou de performance se transposent directement.

Dois-je connaître Three.js pour utiliser une invite de site web 3D ?

Non pour générer, un peu pour itérer. Les invites ci-dessus intègrent le vocabulaire Three.js nécessaire. Savoir ce qu’est OrbitControls ou un fragment shader aide à demander des modifications précises plutôt qu’à régénérer à l’aveugle.

Quel est le meilleur outil IA pour un site web 3D ?

Pour un effet dans un seul fichier ou une section hero, Claude directement : vous conservez la source et payez par token. Pour un site hébergé avec un backend, Lovable ou Bolt sur leurs offres gratuites, ou VULK si vous voulez spécifiquement du code React Three Fiber exporté.

Un héros 3D nuira-t-il aux performances ou au SEO ?

Seulement si vous le laissez faire. Limitez la 3D à une seule scène, ajoutez les garde-fous mobiles ci-dessus, et conservez votre titre et votre texte en HTML réel au-dessus du canevas, comme le font les six prompts. Les crawlers lisent la couche de texte, et les Core Web Vitals dépendent surtout du reste de ce que la page charge.