Créer un site web 3D avec l'IA : le guide complet (2026)

Comment crée-t-on un site web 3D avec l'IA ?

Réponse courte : vous décrivez l'expérience 3D voulue en langage courant — « une section hero avec un tore chromé flottant qui réagit au curseur, fond sombre, éclairage studio doux » — et un générateur de code IA la transforme en une scène Three.js / React Three Fiber fonctionnelle que vous pouvez prévisualiser, affiner avec des prompts de suivi et déployer. Sur VULK (notre produit — transparence ci-dessous), cette boucle s'enchaîne ainsi : prompt → code R3F généré → aperçu en direct dans une microVM Firecracker → déploiement en un clic sur Cloudflare. Pas de logiciel de modélisation 3D, pas de boilerplate WebGL, pas de configuration de build.

Ce n'est plus un workflow de niche. Sur les 11 355 apps générées sur VULK, les jeux et expériences 3D représentent 5,4 % de tous les projets — la deuxième plus grande catégorie après les web apps business (données de la plateforme VULK, juillet 2026). La suite de ce guide couvre tout : pourquoi le web 3D a décollé, Three.js vs React Three Fiber, le pipeline complet du prompt à la scène (heroes, scènes pilotées par le scroll, shaders GLSL, postprocessing), huit prompts complets à copier-coller, un comparatif honnête avec les outils à éditeur visuel (Spline, Womp, Vectary, Unicorn Studio), l'optimisation des performances et le déploiement. Transparence : VULK est notre produit — quand un éditeur visuel est le meilleur choix, nous le disons. Mis à jour le 17 juillet 2026.

Tableau comparatif : génération de code IA vs éditeurs 3D visuels

La séparation structurelle compte plus que n'importe quelle liste de fonctionnalités : les éditeurs visuels produisent des embeds ; la génération IA produit du code. Un embed vit dans un iframe ou un runtime de viewer propriétaire — impossible de le câbler à l'état de votre app, à votre routeur ou à votre base de données. Le code généré, ce ne sont que des composants React : le total de votre panier peut piloter la scène 3D, la position de scroll peut piloter la caméra, et vous pouvez continuer d'éditer pour toujours. Les éditeurs visuels gagnent quand un designer a besoin d'une direction artistique au pixel sans toucher au code.

Pourquoi les sites 3D sont-ils partout en 2026 ?

Trois forces ont convergé. D'abord, le matériel : WebGL2 est universel et WebGPU arrive dans tous les navigateurs majeurs, si bien qu'un téléphone de milieu de gamme rend des scènes qui exigeaient un PC gamer en 2020. Ensuite, les attentes : des lancements produit primés (les pages produit d'Apple, tous les configurateurs automobiles, la une des Awwwards) ont appris aux utilisateurs à lire la profondeur et le mouvement comme du « premium ». Les sites plats se lisent de plus en plus comme des templates. Troisièmement — et c'est la nouveauté — l'IA a supprimé la barrière de compétence. Écrire du Three.js à la main suppose de comprendre les scene graphs, les matrices, le mapping UV, les render loops et les budgets de performance GPU. Décrire une scène en français suppose de ne rien comprendre d'autre que ce que vous voulez voir. Cette troisième force explique pourquoi la 3D a bondi à 5,4 % de tous les projets VULK quelques mois après le lancement (données de la plateforme VULK, juillet 2026).

Three.js vs React Three Fiber : que doit générer l'IA ?

Three.js est la bibliothèque WebGL sous-jacente — scènes, caméras, maillages, matériaux, lumières, un render loop. React Three Fiber (R3F) est un renderer React pour Three.js : chaque objet Three.js devient un composant JSX déclaratif (<mesh>, <pointLight>, <Canvas>), et l'écosystème qui l'entoure (@react-three/drei pour les helpers, @react-three/postprocessing pour les effets) couvre la plupart des besoins courants en quelques lignes.

VULK génère du React Three Fiber dans un projet standard React + Vite + TypeScript, et c'est un choix délibéré :

• Le code déclaratif survit aux éditions. Les prompts de suivi (« rends le tore en verre plutôt qu'en chrome ») deviennent de petits diffs JSX, pas de la chirurgie sur une fonction d'init impérative.
• L'intégration de l'état est gratuite. L'état React, les props et le context pilotent la scène directement — survolez une carte de tarifs dans le DOM, animez l'objet 3D derrière.
• Le nettoyage est automatique. R3F libère géométries et matériaux au démontage des composants ; du Three.js artisanal fuit de la mémoire GPU si l'on n'y prend pas garde.
• L'écosystème est idiomatique. OrbitControls, Environment, ScrollControls, Text3D, useGLTF — les helpers de drei remplacent des centaines de lignes de boilerplate.

Le Three.js brut garde son sens hors de React (sites vanilla, moteurs de jeu à boucles maison). Si c'est votre contexte, les concepts générés se transfèrent un pour un — R3F est une fine peau déclarative sur les mêmes objets.

À quoi ressemble le workflow du prompt à la scène 3D ?

La boucle complète sur VULK, étape par étape :

1. Décrire la scène. Écrivez ce que vous voulez comme si vous briefiez un creative developer : les objets, les matériaux, l'ambiance lumineuse, le comportement de la caméra, les interactions. De la précision en entrée, de la qualité en sortie — « une sphère iridescente flottante » bat « un truc cool en 3D ».

2. Génération. L'IA planifie le scene graph (caméra, lumières, géométrie, matériaux, interactions), puis écrit le projet complet : setup du <Canvas>, composants par objet, rig d'éclairage (typiquement un montage trois points ou un <Environment> HDRI), hooks d'animation (useFrame) et gestion responsive (device pixel ratio, resize, tactile).

3. Aperçu en direct. Le projet démarre dans une microVM Firecracker avec hot reload — le même serveur de dev Vite que vous lanceriez en local, exécuté côté serveur. Vous voyez la vraie scène en quelques secondes, pas une maquette.

4. Itérer par prompt. « Ralentis la rotation de moitié. » « Ajoute du bloom, discret. » « Fais-la réagir au scroll — la caméra doit avancer pendant que l'utilisateur scrolle le premier viewport. » Chaque suivi n'édite que les fichiers concernés.

5. Passer au code quand vous voulez. Tout est du code source que vous pouvez lire et éditer — ajuster une constante de couleur, retoucher une courbe d'easing, ou confier le projet à un développeur. C'est la porte de sortie que les outils d'embed n'ont pas.

6. Déployer. Un clic vers le réseau edge de Cloudflare, ou export ZIP / push GitHub et hébergement où vous voulez — c'est un build Vite standard.

Quels types de scènes 3D l'IA peut-elle vraiment générer ?

Quatre familles couvrent presque tout ce qui se publie sur le web 3D aujourd'hui, et toutes les quatre se promptent :

Heroes 3D. Un objet ou une composition marquante derrière ou à côté du titre — géométrie flottante, rendus produit, formes abstraites aux matériaux premium (verre, chrome, iridescence). Le cheval de trait des sites marketing 3D.

Scènes pilotées par le scroll. La caméra ou les objets s'animent au fil du scroll — vues éclatées de produit, séquences narratives, transitions de section. En R3F, c'est ScrollControls + useScroll de drei qui mappent l'offset de scroll sur la position de caméra ou la progression d'animation.

Travail de shaders GLSL. Des shaders vertex/fragment sur mesure pour des effets qu'aucun preset de matériau ne donne : dégradés fluides, surfaces déplacées par du bruit, champs de particules, balayages holographiques. L'IA est réellement douée pour écrire du GLSL — décrire « un dégradé qui s'écoule lentement comme de l'encre dans l'eau » produit un fragment shader avec simplex noise et écoulement temporel qu'il faudrait de l'expérience shader pour écrire à la main.

Postprocessing. Effets screen-space par-dessus le rendu : bloom pour la lueur, depth of field pour la mise au point, aberration chromatique pour un rendu d'objectif, vignette pour l'ambiance. Un bloc <EffectComposer> de @react-three/postprocessing — peu coûteux à ajouter, transformateur quand il reste subtil.

8 prompts complets à copier-coller pour des sites 3D

Ce sont des prompts complets, pas des fragments — collez-en n'importe lequel tel quel dans VULK (ou adaptez-le pour un autre générateur). Chacun spécifie objets, matériaux, éclairage, caméra et interaction, car c'est ce qui sépare une scène utilisable d'une scène aléatoire.

1. Landing page SaaS avec hero 3D :

Construis une landing page pour un SaaS d'analytics développeur nommé Pulseboard. Thème sombre (fond #0a0a0f). Le hero a un titre à gauche et une scène 3D interactive à droite : un cluster de trois cubes de verre flottants à réfraction subtile, tournant lentement à des vitesses différentes, avec une point light teal douce et une key light blanche. Les cubes doivent s'incliner doucement vers la position du curseur. Sous le hero : une section fonctionnalités avec trois cartes, une section tarifs avec deux offres et un footer. La scène 3D doit se charger en lazy-load et suspendre le rendu quand elle sort du viewport.

2. Configurateur de produit :

Crée un configurateur de produit 3D pour un clavier mécanique. Au centre de l'écran : un modèle 3D de clavier construit à partir de géométries de boîtes arrondies (une base plus une grille de keycaps). Barre latérale droite avec options : couleur du boîtier (graphite, argent, marine), couleur des keycaps (blanc, noir, orange) et type de switch qui change une petite spécification texte en dessous. Sélectionner une couleur met à jour instantanément les matériaux du modèle 3D avec une courte transition. OrbitControls limités à la rotation horizontale et à une légère inclinaison verticale, auto-rotation après 5 secondes d'inactivité. Éclairage studio avec une ombre douce sous le clavier. Bouton d'ajout au panier qui affiche la configuration choisie dans un toast.

3. Histoire de produit pilotée par le scroll :

Construis un site produit d'une page piloté par le scroll pour une gourde connectée. La gourde est une forme de capsule 3D au matériau teal métallique, toujours centrée. Section 1 : la gourde flotte et tourne lentement, le titre apparaît en fondu. Section 2 : au scroll, la caméra avance et la gourde s'incline pour montrer le bouchon, avec une étiquette « Capteur de température ». Section 3 : la gourde se sépare en bouchon et corps (vue éclatée) avec deux étiquettes supplémentaires. Section 4 : la caméra recule, la gourde se réassemble, le bouton CTA apparaît. Utilise une animation liée au scroll en douceur, pas de scroll-jacking — la position de scroll de l'utilisateur pilote directement la progression de l'animation.

4. Fond en shader GLSL :

Crée une landing page pour une startup de musique IA avec un fond shader animé plein viewport : un dégradé violet sombre vers bleu profond qui s'écoule lentement avec un mouvement de bruit organique, comme de l'encre qui diffuse dans l'eau, écrit comme un fragment shader GLSL sur mesure avec simplex noise et un uniform de temps. Garde la saturation sous 60 % pour que le texte blanc reste lisible. Titre, sous-titre et un champ e-mail de liste d'attente centrés par-dessus. L'animation du shader doit respecter prefers-reduced-motion et retomber sur un dégradé statique.

5. Portfolio 3D interactif :

Construis un site portfolio pour un artiste 3D. Hero : mon nom en grand texte 3D extrudé (Text3D) au matériau métal brossé, éclairé par deux rim lights colorées (magenta et cyan), flottant au-dessus d'un sol sombre réfléchissant avec un léger reflet miroir. Le texte pivote de quelques degrés en suivant le curseur. En dessous : une grille de 6 cartes projets avec tilt au survol, une section à propos et un formulaire de contact. Ajoute un effet de postprocessing bloom discret sur le hero uniquement.

6. Mini-jeu navigateur :

Crée un jeu navigateur : un endless runner low-poly où le joueur contrôle un petit vaisseau spatial esquivant des astéroïdes sur une piste à trois voies. Flèches ou A/D pour changer de voie, swipe sur mobile. Les astéroïdes apparaissent devant et avancent vers la caméra à vitesse croissante. Compteur de score basé sur le temps de survie, meilleur score sauvegardé en localStorage, écran de game over avec bouton de redémarrage. Esthétique low-poly aux matériaux flat-shaded, fond spatial sombre avec un système de particules en champ d'étoiles, éclairage directionnel doux.

7. Globe de visualisation de données :

Construis une page dashboard avec un globe 3D interactif montrant des bureaux. Le globe est une sphère à texture terrestre stylisée sombre avec une lueur atmosphérique subtile (shader fresnel). Six marqueurs de localisation en petits pins lumineux à de vraies coordonnées lat/long (Londres, New York, Singapour, São Paulo, Berlin, Tokyo), correctement converties de lat/long en positions 3D. Survoler un pin affiche un tooltip avec le nom de la ville et l'effectif ; cliquer focalise la caméra sur ce pin avec une transition animée fluide. Auto-rotation lente qui se met en pause au survol. Barre latérale listant les mêmes bureaux — cliquer sur un élément déclenche la même focalisation caméra.

8. Hero premium avec postprocessing :

Construis une landing page pour une marque de montres de luxe. Hero : un torus-knot 3D en or poli tournant lentement sur fond noir, avec depth of field (l'arête avant nette, l'arrière doucement flouté), un bloom discret sur les hautes lumières et une vignette lente. Titre en serif et un seul CTA. La caméra dérive presque imperceptiblement (lent mouvement sinusoïdal) pour garder la scène vivante. Tout ce qui est sous la ligne de flottaison est du 2D standard : une grille de collection à trois colonnes et une inscription newsletter. Plafonne le pixel ratio à 2 et suspends le render loop quand le hero est hors écran.

Deux conseils d'itération valables pour tous les prompts ci-dessus : changez une chose par suivi (« rends le bloom plus discret » — pas une consigne en cinq parties), et nommez l'ambiance, pas seulement la géométrie (« premium, sombre, sobre » oriente matériaux et éclairage plus efficacement que les seules descriptions d'objets).

Comment VULK se compare-t-il à Spline, Womp et Unicorn Studio ?

Honnêtement — des outils différents pour des utilisateurs différents, et les éditeurs visuels excellent dans leur domaine :

Spline (gratuit → $12/mois annuel) est l'éditeur 3D visuel standard des designers : édition collaborative en temps réel, matériaux, états d'animation et interactions configurés dans une GUI. Sa sortie est une scène Spline intégrée via viewer. Choisissez Spline quand un designer a besoin d'un contrôle total de direction artistique et que la pièce 3D est autonome. Sa limite est le revers de la médaille : la scène n'est pas du code que votre app peut piloter, et le runtime du viewer ajoute du poids que vous ne contrôlez pas.

Womp (gratuit → $9.99/mois annuel) est de la modélisation 3D dans le navigateur (basée SDF, très abordable). C'est le moyen le plus simple de créer de vraies formes 3D à partir de rien, exportables en maillages GLB/STL. C'est un outil de modélisation, pas un créateur de sites — associez-le à autre chose (y compris VULK : générez le site, chargez votre GLB exporté de Womp avec useGLTF).

Unicorn Studio (gratuit 10 publications → $20/mois) fait des effets WebGL no-code — fonds hero pilotés par shader, distorsion, effets de texte — réglés avec des curseurs et intégrés. Le chemin le plus rapide vers un effet léché ; pas un outil pour des scènes complètes, des interactions ou des apps.

Vectary (gratuit → $15/mois annuel) vise les configurateurs de produit et la visualisation AR via embeds — solide pour les vues produit e-commerce, limité pour tout le reste.

VULK ($3.99 intro 3 jours → à partir de $19.99/mois, payant uniquement) est le seul de cette liste dont la sortie est une application déployable au code source Three.js/R3F éditable. C'est l'échange : pas d'éditeur visuel et pas d'offre gratuite, contre la propriété du code, l'intégration applicative et zéro runtime d'embed. Si vous êtes designer avec zéro intérêt pour le code, Spline vous rendra plus heureux. Si la scène 3D fait partie d'un produit — câblée à l'état, aux données, aux routes — le code généré est la seule approche qui ne finit pas dans un mur.

Comment garder un site 3D rapide ?

La performance est là où meurent la plupart des sites 3D. La checklist complète, entièrement promptable (« applique les bonnes pratiques de performance 3D » fonctionne, mais être explicite vaut mieux) :

• Compressez la géométrie avec Draco. Les modèles GLTF/GLB fondent de 5 à 10× avec la compression Draco ; useGLTF de drei gère le décodage automatiquement. Un modèle produit de 4MB tombe à ~500KB.
• Lazy-loadez le bundle 3D. Three.js + R3F pèsent ~150KB+ gzippés avant votre scène. Code-splittez (React.lazy + Suspense) pour que le premier paint n'attende jamais WebGL, et montrez une image poster statique jusqu'au montage de la scène.
• Suspendez hors écran. Utilisez frameloop="demand" ou un IntersectionObserver pour arrêter le render loop quand la scène n'est pas visible. Un hero qui s'anime trois écrans plus bas, c'est de la batterie brûlée pour rien.
• Plafonnez le device pixel ratio à 2. dpr={[1, 2]} sur le Canvas. Rendre en DPR 3 sur un téléphone triple le travail fragment pour zéro gain visible.
• Budgétez lumières et ombres. Chaque lumière dynamique projetant des ombres re-rend la scène depuis son point de vue. Une key light à ombres plus un <Environment> HDRI battent quatre point lights, visuellement et en calcul.
• Instanciez la géométrie répétée. Un champ de 500 astéroïdes, c'est un draw call avec <Instances> — 500 sans.
• Prévoyez un fallback reduced-motion. Respectez prefers-reduced-motion avec un rendu statique — une exigence d'accessibilité qui sert aussi de fallback pour les appareils modestes.
• Mesurez sur un vrai téléphone. Le profiling GPU des Chrome DevTools sur un Android de milieu de gamme dit la vérité ; votre portable M-series, non.

Comment déployer un site 3D ?

Un projet R3F généré est un build Vite standard — un dist/ d'assets statiques — le déploiement est donc identique à celui de n'importe quelle app React. Sur VULK, c'est un clic vers le réseau edge de Cloudflare avec URL en production, domaines personnalisés pris en charge. Les projets exportés (ZIP ou GitHub) se déploient partout où existe de l'hébergement statique : Cloudflare Pages, Vercel, Netlify, un bucket S3. Deux notes spécifiques à la 3D : assurez-vous que votre hébergeur sert les assets .glb/.hdr avec de longs cache headers (ils sont immuables et souvent les fichiers les plus lourds), et gardez les textures en formats compressés (KTX2/basis quand c'est supporté, sinon du JPEG/WebP bien dimensionné — une texture de 4096px sur un écran de téléphone, c'est de la bande passante gaspillée).