Un prompt suffit pour créer un site 3D en 30 secondes (6 testés)

Les bibliothèques de prompts pour sites 3D font généralement payer le texte des prompts, ou se contentent d’une vidéo de démonstration sans rien dévoiler. Voici six prompts complets : vous pouvez les coller tels quels dans Claude, ou n’adapter qu’une ligne pour Lovable, Bolt et Cursor. Ils ont tous été exécutés sur un modèle en direct ; cinq ont produit des pages Three.js fonctionnelles. Les captures ci-dessous montrent les rendus obtenus, pas des maquettes.

6 prompts de sites 3D à copier dès maintenant

Chaque prompt demande une page HTML autonome, avec Three.js chargé depuis un CDN. Ce détail est important : un fichier unique s’ouvre localement dans n’importe quel navigateur, se transmet facilement à un développeur ou se colle dans un bloc de code personnalisé. Il oblige aussi le modèle à garder toute la scène dans un seul fichier, plutôt que de disperser les imports dans un projet.

1. Un hero de galaxie en particules

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

Généré en 27 secondes et 3 692 tokens de sortie. La galaxie tourne, le glisser-déposer pour orbiter fonctionne, et le bouton reste cliquable à travers le calque superposé. Un vrai défaut subsiste : le sous-titre tombe sur le cœur lumineux de la galaxie et devient difficile à lire. Le correctif figure dans les notes de test plus bas.

2. Une vitrine produit pilotée par le défilement

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

C’est la plus lourde des cinq générations réussies, avec 63 secondes et 7 023 tokens de sortie, mais aussi le résultat le plus convaincant. Le défilement entraîne la caméra autour de l’objet et le matériau change bien de couleur à chaque section, comme demandé :

L’interpolation amortie par lerp a également été respectée. Le mouvement évoque davantage un site d’agence haut de gamme qu’un diaporama qui force le scroll.

3. Un fond dégradé fluide en GLSL

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete
HTML file in a single code block.

31 secondes, 3 830 tokens, réussi dès le premier essai. La mention « single quad, no postprocessing passes » sert de garde-fou pour les performances : sans elle, les modèles ont tendance à utiliser EffectComposer et des passes de bloom qui font chuter la fréquence d’images sur les GPU intégrés.

4. Portfolio 3D en survol de caméra : celui qui a résisté

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

Trois tentatives plus tard, ce n’est toujours pas publiable. La capture ci-dessus explique néanmoins pourquoi nous la montrons : la carte est bien rendue, mais la caméra se place derrière elle et le titre apparaît en miroir. La première exécution a dépassé notre plafond de 16 000 tokens de sortie en plein milieu du fichier. La deuxième, avec la consigne « keep the code compact » — d’où sa présence dans le prompt — a rendu les cartes mais a fait traverser la caméra en ligne droite à travers elles. La troisième a corrigé le clipping, tout en perdant le lien entre la caméra et le défilement. La chorégraphie d’un trajet de caméra, combinée à des textures par carte, est réellement plus difficile pour les modèles que les scènes précédentes. Prévoyez une session de débogage, ou simplifiez le tout en une grille courbe statique avec des états de survol.

5. Visualiseur de produit interactif

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code block.

Réussi du premier coup : 66 secondes et 7 719 tokens. Les nuanciers comme le bouton métal/mat actualisent le matériau en direct. Le modèle a même ajouté une attention non demandée : une note indiquant que la rotation est verrouillée sur l’axe horizontal pour garder le produit dans le cadre.

6. Site vitrine 3D en une page

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

62 secondes, 7 419 tokens. Le modèle a inventé le nom du studio, créé les quatre sections et placé un icosaèdre low-poly flottant exactement à l’endroit demandé. Notre première tentative avec ce prompt a atteint un plafond de sortie de 8 000 tokens et est arrivée tronquée. Si vous appelez un modèle via API, prévoyez une limite d’au moins 16 000 tokens pour les prompts de page complète.

Ce que les tests ont réellement donné

Trois exécutions par prompt sur un même modèle ne constituent pas un benchmark ; considérez cela comme un état des lieux ponctuel de la génération prompt-vers-3D à la mi-2026. Côté méthode : claude-sonnet-5 via son API le 17 juillet 2026, paramètres par défaut, sans prompt système. Les résultats ont été rendus dans Chrome sur ordinateur de bureau, en 1280×720, sur un MacBook Apple Silicon. Pour les exécutions réussies, le modèle a lui-même choisi la version UMD r128 de Three.js depuis un CDN public.

Parmi les cinq pages fonctionnelles, un seul défaut visuel ressort : dans le prompt 1, le sous-titre se trouve sur la zone la plus lumineuse de la galaxie et devient presque illisible. Une seule instruction de suivi a suffi : 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 observé sur l’ensemble des tests : la scène 3D elle-même sort généralement correctement ; le budget d’itération part ensuite dans la typographie, le contraste des superpositions et, pour le portfolio, la chorégraphie de la caméra.

À cette échelle, le coût est négligeable. L’ensemble du test — neuf générations, en comptant les nouvelles tentatives du portfolio, soit environ 46 000 tokens de sortie — a coûté nettement moins d’un dollar. Nous l’avons exécuté via AIReiter, qui revend l’accès à l’API Claude à un cinquième du tarif officiel par token : même une session d’itération obstinée reste donc à un prix dérisoire.

Bien structurer son propre prompt de site 3D

Les prompts qui ont passé le test reposent sur cinq ingrédients. Conservez-les tous et vos chances de réussite au premier essai augmentent fortement.

1. Un seul sujet de scène. Une galaxie, un torus-knot, un champ de dégradé. Dans nos essais comme dans la plupart des exemples partagés par la communauté, c’est lorsqu’un prompt réclame plusieurs fonctions 3D sans rapport sur une même page que les modèles commencent à oublier des exigences.
2. Un moteur de mouvement. Le temps (slowly rotates, driven by a time uniform) ou le défilement (as the user scrolls, the camera orbits). Indiquez clairement lequel vous voulez : « animated » seul laisse au modèle le choix d’une animation sans intérêt. Le portfolio apporte une nuance : faire piloter un objet par le défilement est fiable ; faire avancer une caméra le long d’un trajet entre plusieurs objets est là que les choses se compliquent.
3. L’interaction. OrbitControls pour la rotation au glisser-déposer a fonctionné lors de chaque exécution réussie de notre test. Si du texte recouvre le canvas, demandez pointer-events: none sur son conteneur et pointer-events: auto sur les boutons. Sans cela, le calque texte intercepte les glissements et les clics destinés à la scène.
4. Le contenu de l’interface superposée. Donnez le titre exact entre guillemets. Les modèles comblent les textes non spécifiés avec des slogans génériques qu’il faudra de toute façon remplacer.
5. Des garde-fous de performance et de taille. Un nombre de particules, single quad, no postprocessing ou low-poly aide à maintenir la rapidité de la page ; keep the code compact évite de dépasser les limites de tokens des API. Deux de nos neuf exécutions se sont arrêtées sur une limite de sortie avant même qu’une question de qualité du code ne se pose.

Voici le vocabulaire qui oriente le modèle vers de la 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. Ces termes comptent parce qu’ils correspondent à de véritables noms d’API : le modèle s’appuie alors sur des bibliothèques rencontrées durant son entraînement au lieu d’improviser.

Le raccourci : coller du code existant

Pour des effets qui dépassent ce que vous pouvez décrire, il existe une deuxième approche. Trouvez un effet Three.js fini sur CodePen, collez le code brut dans votre outil IA et demandez simplement Add this 3D animation to the hero. Le modèle adapte alors l’extrait à votre stack — composants React, configuration de build, structure de sections — ce qui représente souvent la partie fastidieuse. Builder.io a documenté cette méthode avec une animation de planète à 50 000 particules, y compris le même correctif de superposition pointer-events: none, dans leur guide.

C’est l’approche la plus rentable lorsque vous visez le niveau de finition des sites primés : les calculs du shader viennent d’un humain qui les a réglés, et l’IA se charge uniquement de l’intégration.

Quels outils acceptent ces prompts ?

Les six prompts ci-dessus ne dépendent pas d’un outil particulier : toute solution capable d’écrire et de prévisualiser du HTML/JS peut les exécuter. Les différences portent sur le format de sortie et la propriété du code, vérifiés le 17 juillet 2026 :

Deux outils méritent une précision. VULK promet de générer du véritable code React Three Fiber — des scènes WebGL interactives plutôt qu’un en-tête vidéo en boucle — et les sites de sa vitrine vont dans ce sens. C’est précisément la distinction à vérifier avant de payer un quelconque « AI 3D website builder » : du vrai code ou un en-tête vidéo. Et si vous préférez parcourir des prompts plutôt que les écrire, MotionSites propose une bibliothèque organisée par catégories pour Lovable, Bolt, Cursor et Claude. Une partie est disponible gratuitement à la copie ; le reste nécessite un abonnement :

Là où les prompts atteignent leurs limites

Une question revient souvent dans les discussions de r/lovable et r/web_design : un bon prompt peut-il reproduire des sites comme mont-fort.com ou les pages Labs de Noomo Agency ? Réponse honnête : pas avec un prompt seul. Ces sites reposent sur des modèles GLTF personnalisés, un éclairage dirigé artistiquement et des shaders sur mesure — des ressources qu’un prompt textuel ne peut pas créer par magie. Un prompt vous donne les mécaniques de ces sites, telles que les caméras guidées par le défilement, les fonds shader ou les mouvements amortis, avec une géométrie de substitution. Remplacer celle-ci par un véritable fichier de modèle réduit une partie de l’écart, mais l’éclairage, les matériaux et les solutions de repli sur mobile restent un vrai travail de design. L’échec de notre portfolio en survol illustre la même leçon à plus petite échelle : plus un prompt s’approche d’une scène chorégraphiée avec de nombreux objets, plus l’itération humaine devient nécessaire.

Trois modes de défaillance expliquent la plupart des générations cassées, et chacun se corrige par une seule ligne :

• Écran noir, sans erreur visible. Il s’agit généralement d’une incompatibilité entre imports ES modules et CDN. Correctif à ajouter au prompt : Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128 est la version choisie spontanément par nos tests, et elle fonctionne encore ; les versions plus récentes de Three.js ont abandonné le chemin UMD, donc l’épingler évite ce décalage.)
• Fluide sur ordinateur, saccadé sur téléphone. Le nombre de particules convenait à un laptop, mais pas à un mobile. Correctif : Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• La scène 3D fonctionne, mais aucun élément de la page n’est cliquable. Le canvas ou un calque superposé capte les événements. Correctif : Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

Et un problème rencontré dans nos propres essais : le texte d’une carte 3D s’affiche en miroir. La caméra regarde la face arrière du plan. Correctif : Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

FAQ

Existe-t-il des prompts gratuits pour créer un site 3D ?

Oui. Les six prompts de cet article sont complets et libres à copier. DocsBot et l’offre gratuite de MotionSites en proposent également d’autres. Les bibliothèques payantes apportent surtout du volume et une variété prétestée, pas une catégorie différente de prompts.

Ces prompts fonctionnent-ils dans Lovable ou Bolt ?

Oui, avec un ajustement : retirez l’exigence « single-file HTML », puisque ces plateformes initialisent des projets React. Conservez le reste — sujet de la scène, moteur de mouvement, interaction et garde-fou de performance — car tout se transpose directement.

Faut-il connaître Three.js pour utiliser un prompt de site 3D ?

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

Quel est le meilleur outil IA pour créer un site 3D ?

Pour un effet autonome ou une section hero, utilisez Claude directement : vous conservez le code source et payez au token. Pour un site hébergé avec backend, Lovable ou Bolt dans leurs offres gratuites, ou VULK si vous voulez spécifiquement exporter du code React Three Fiber.

Un hero 3D nuit-il aux performances ou au SEO ?

Seulement si vous le laissez faire. Limitez la 3D à une seule scène, appliquez les garde-fous mobile indiqués plus haut et gardez le titre comme le texte courant dans du vrai HTML au-dessus du canvas, comme le font les six prompts. Les robots lisent le calque de texte, et les Core Web Vitals dépendent surtout de tout ce que la page charge par ailleurs.