Come creare un sito web 3D con l'IA: la guida completa (2026)

Come si crea un sito web 3D con l'IA?

Risposta breve: descrivi l'esperienza 3D che vuoi in linguaggio normale — "una sezione hero con un toro cromato fluttuante che reagisce al cursore, sfondo scuro, illuminazione da studio morbida" — e un generatore di codice IA la trasforma in una scena Three.js / React Three Fiber funzionante che puoi vedere in anteprima, rifinire con prompt successivi e deployare. Su VULK (il nostro prodotto — disclosure sotto), quel ciclo scorre così: prompt → codice R3F generato → anteprima live in una microVM Firecracker → deploy in un clic su Cloudflare. Niente software di modellazione 3D, niente boilerplate WebGL, niente configurazione di build.

Non è più un workflow di nicchia. Tra le 11.355 app generate su VULK, giochi ed esperienze 3D sono il 5,4% di tutti i progetti — la seconda categoria più grande dopo le web app business (dati della piattaforma VULK, luglio 2026). Il resto di questa guida copre tutto: perché il web 3D è decollato, Three.js vs React Three Fiber, la pipeline completa da prompt a scena (hero, scene guidate dallo scroll, shader GLSL, postprocessing), otto prompt completi pronti da copiare, un confronto onesto con gli strumenti a editor visuale (Spline, Womp, Vectary, Unicorn Studio), ottimizzazione delle prestazioni e deploy. Disclosure: VULK è il nostro prodotto — dove un editor visuale è la scelta migliore, lo diciamo. Aggiornato il 17 luglio 2026.

Tabella comparativa: generazione di codice IA vs editor 3D visuali

La divisione strutturale conta più di qualsiasi lista di funzionalità: gli editor visuali producono embed; la generazione IA produce codice. Un embed vive dentro un iframe o un runtime viewer proprietario — non puoi collegarlo allo stato della tua app, al tuo router o al tuo database. Il codice generato sono semplicemente componenti React: il totale del tuo carrello può guidare la scena 3D, la posizione di scroll può guidare la camera, e puoi continuare a modificarlo per sempre. Gli editor visuali vincono quando un designer ha bisogno di direzione artistica al pixel senza toccare codice.

Perché i siti 3D sono ovunque nel 2026?

Sono convergite tre forze. Primo, l'hardware: WebGL2 è universale e WebGPU sta arrivando in tutti i browser principali, quindi un telefono di fascia media renderizza scene che nel 2020 richiedevano un PC da gaming. Secondo, le aspettative: lanci di prodotto premiati (le pagine prodotto di Apple, ogni configuratore automobilistico, la prima pagina di Awwwards) hanno addestrato gli utenti a leggere profondità e movimento come "premium". I siti piatti si leggono sempre più come template. Terzo — ed è la parte nuova — l'IA ha rimosso la barriera di competenze. Scrivere Three.js a mano significa capire scene graph, matrici, mapping UV, render loop e budget di prestazioni GPU. Descrivere una scena in italiano significa non capire nulla tranne ciò che vuoi vedere. Quella terza forza è il motivo per cui il 3D è balzato al 5,4% di tutti i progetti VULK entro pochi mesi dal lancio (dati della piattaforma VULK, luglio 2026).

Three.js vs React Three Fiber: cosa dovrebbe generare l'IA?

Three.js è la libreria WebGL sottostante — scene, camere, mesh, materiali, luci, un render loop. React Three Fiber (R3F) è un renderer React per Three.js: ogni oggetto Three.js diventa un componente JSX dichiarativo (<mesh>, <pointLight>, <Canvas>), e l'ecosistema attorno (@react-three/drei per gli helper, @react-three/postprocessing per gli effetti) copre la maggior parte delle esigenze comuni in poche righe.

VULK genera React Three Fiber dentro un progetto standard React + Vite + TypeScript, ed è una scelta deliberata:

• Il codice dichiarativo sopravvive alle modifiche. I prompt successivi ("rendi il toro di vetro invece che cromato") diventano piccoli diff JSX, non chirurgia su una funzione di init imperativa.
• L'integrazione dello stato è gratis. Stato React, props e context guidano la scena direttamente — passa il mouse su una card dei prezzi nel DOM, anima l'oggetto 3D dietro.
• La pulizia è automatica. R3F smaltisce geometrie e materiali quando i componenti si smontano; il Three.js fatto a mano perde memoria GPU se non stai attento.
• L'ecosistema è idiomatico. OrbitControls, Environment, ScrollControls, Text3D, useGLTF — gli helper di drei sostituiscono centinaia di righe di boilerplate.

Il Three.js puro ha ancora senso fuori da React (siti vanilla, motori di gioco con loop propri). Se quello è il tuo contesto, i concetti generati si trasferiscono uno a uno — R3F è una sottile pelle dichiarativa sugli stessi oggetti.

Com'è il workflow da prompt a scena 3D?

Il ciclo completo su VULK, passo per passo:

1. Descrivi la scena. Scrivi ciò che vuoi come se stessi facendo un brief a un creative developer: gli oggetti, i materiali, l'atmosfera luminosa, il comportamento della camera, le interazioni. Specificità in ingresso, qualità in uscita — "una sfera iridescente fluttuante" batte "qualcosa di figo in 3D".

2. Generazione. L'IA pianifica lo scene graph (camera, luci, geometria, materiali, interazioni), poi scrive il progetto completo: setup del <Canvas>, componenti per oggetto, rig di illuminazione (tipicamente un setup a tre punti o un <Environment> HDRI), hook di animazione (useFrame) e gestione responsive (device pixel ratio, resize, touch).

3. Anteprima live. Il progetto si avvia in una microVM Firecracker con hot reload — lo stesso dev server Vite che eseguiresti in locale, ma server-side. Vedi la scena reale in pochi secondi, non un mockup.

4. Itera via prompt. "Dimezza la velocità di rotazione." "Aggiungi bloom, sottile." "Fallo reagire allo scroll — la camera deve avanzare mentre l'utente scorre il primo viewport." Ogni follow-up modifica solo i file interessati.

5. Passa al codice quando vuoi. Tutto è sorgente che puoi leggere e modificare — ritocca una costante di colore, regola una curva di easing, o consegna il progetto a uno sviluppatore. Questa è l'uscita di sicurezza che gli strumenti di embed non hanno.

6. Deploy. Un clic verso la rete edge di Cloudflare, oppure esporta lo ZIP / fai push su GitHub e ospita ovunque — è un build Vite standard.

Che tipi di scene 3D può davvero generare l'IA?

Quattro famiglie coprono quasi tutto ciò che si pubblica oggi sul web 3D, e tutte e quattro sono promptabili:

Hero 3D. Un singolo oggetto o composizione d'impatto dietro o accanto al titolo — geometria fluttuante, render di prodotto, forme astratte con materiali premium (vetro, cromo, iridescenza). Il cavallo da tiro dei siti marketing 3D.

Scene guidate dallo scroll. La camera o gli oggetti si animano mentre l'utente scorre — viste esplose di prodotto, sequenze narrative, transizioni di sezione. In R3F questo è ScrollControls + useScroll di drei che mappano l'offset di scroll sulla posizione della camera o sul progresso dell'animazione.

Lavoro con shader GLSL. Shader vertex/fragment personalizzati per effetti che nessun preset di materiale ti dà: gradienti fluidi, superfici spostate dal noise, campi di particelle, sweep olografici. L'IA è genuinamente brava a scrivere GLSL — descrivere "un gradiente che scorre lentamente come inchiostro nell'acqua" produce un fragment shader con simplex noise e flusso basato sul tempo che servirebbe esperienza di shader per scrivere a mano.

Postprocessing. Effetti screen-space sopra il render: bloom per il bagliore, depth of field per il fuoco, aberrazione cromatica per una sensazione di lente, vignettatura per l'atmosfera. Un blocco <EffectComposer> di @react-three/postprocessing — economico da aggiungere, trasformativo quando è sottile.

8 prompt completi pronti da copiare per siti 3D

Questi sono prompt completi, non frammenti — incolla uno qualsiasi in VULK (o adattalo per un altro generatore) così com'è. Ognuno specifica oggetti, materiali, illuminazione, camera e interazione, perché è questo che separa una scena utilizzabile da una casuale.

1. Landing page SaaS con hero 3D:

Costruisci una landing page per un SaaS di analytics per sviluppatori chiamato Pulseboard. Tema scuro (sfondo #0a0a0f). L'hero ha un titolo a sinistra e una scena 3D interattiva a destra: un cluster di tre cubi di vetro fluttuanti con rifrazione sottile, che ruotano lentamente a velocità diverse, con una point light teal morbida e una key light bianca. I cubi devono inclinarsi dolcemente verso la posizione del cursore. Sotto l'hero: una sezione funzionalità con tre card, una sezione prezzi con due piani e un footer. La scena 3D deve caricarsi in lazy-load e mettere in pausa il rendering quando esce dal viewport.

2. Configuratore di prodotto:

Crea un configuratore di prodotto 3D per una tastiera meccanica. Centro dello schermo: un modello 3D di tastiera costruito con geometrie di box arrotondati (una base più una griglia di keycap). Sidebar destra con opzioni: colore del case (grafite, argento, blu navy), colore dei keycap (bianco, nero, arancione) e tipo di switch che cambia una piccola specifica testuale sotto. Selezionare un colore aggiorna i materiali del modello 3D all'istante con una breve transizione. OrbitControls limitati alla rotazione orizzontale e a una leggera inclinazione verticale, auto-rotazione dopo 5 secondi di inattività. Illuminazione da studio con un'ombra morbida sotto la tastiera. Bottone aggiungi al carrello che mostra la configurazione scelta in un toast.

3. Storia di prodotto guidata dallo scroll:

Costruisci un sito di prodotto a una pagina guidato dallo scroll per una borraccia smart. La borraccia è una forma a capsula 3D con materiale teal metallico, sempre centrata. Sezione 1: la borraccia fluttua e ruota lentamente, il titolo appare in dissolvenza. Sezione 2: mentre l'utente scorre, la camera avanza e la borraccia si inclina per mostrare il tappo, con un'etichetta "Sensore di temperatura". Sezione 3: la borraccia si separa in tappo e corpo (vista esplosa) con altre due etichette. Sezione 4: la camera arretra, la borraccia si ricompone, appare il bottone CTA. Usa animazione legata allo scroll in modo fluido, niente scroll-jacking — la posizione di scroll dell'utente guida direttamente il progresso dell'animazione.

4. Sfondo con shader GLSL:

Crea una landing page per una startup di musica IA con uno sfondo shader animato a tutto viewport: un gradiente da viola scuro a blu profondo che scorre lentamente con movimento organico di noise, come inchiostro che si diffonde nell'acqua, scritto come fragment shader GLSL personalizzato con simplex noise e un uniform temporale. Mantieni la saturazione sotto il 60% perché il testo bianco resti leggibile. Titolo, sottotitolo e un input email per la lista d'attesa centrati sopra. L'animazione dello shader deve rispettare prefers-reduced-motion e ripiegare su un gradiente statico.

5. Portfolio 3D interattivo:

Costruisci un sito portfolio per un artista 3D. Hero: il mio nome in grande testo 3D estruso (Text3D) con materiale metallo spazzolato, illuminato da due rim light colorate (magenta e ciano), fluttuante sopra un pavimento scuro riflettente con un sottile riflesso a specchio. Il testo ruota di qualche grado seguendo il cursore. Sotto: una griglia progetti di 6 card con tilt all'hover, una sezione about e un form di contatto. Aggiungi un sottile effetto postprocessing bloom solo sull'hero.

6. Mini-gioco da browser:

Crea un gioco da browser: un endless runner low-poly in cui il giocatore controlla una piccola navicella spaziale che schiva asteroidi su una pista a tre corsie. Frecce o A/D per cambiare corsia, swipe su mobile. Gli asteroidi spawano davanti e si muovono verso la camera con velocità crescente nel tempo. Contatore punteggio basato sul tempo di sopravvivenza, record salvato in localStorage, schermata di game over con bottone di restart. Estetica low-poly con materiali flat-shaded, sfondo spaziale scuro con un sistema di particelle a campo stellare, illuminazione direzionale morbida.

7. Globo di visualizzazione dati:

Costruisci una pagina dashboard con un globo 3D interattivo che mostra le sedi degli uffici. Il globo è una sfera con una texture terrestre stilizzata scura e un sottile bagliore atmosferico (shader fresnel). Sei marcatori di posizione come piccoli pin luminosi a coordinate lat/long reali (Londra, New York, Singapore, San Paolo, Berlino, Tokyo), convertite correttamente da lat/long a posizioni 3D. Passare il mouse su un pin mostra un tooltip con nome della città e organico; cliccare focalizza la camera su quel pin con una transizione animata fluida. Auto-rotazione lenta che si mette in pausa all'hover. Sidebar con la stessa lista di uffici — cliccare una voce attiva lo stesso focus di camera.

8. Hero premium con postprocessing:

Costruisci una landing page per un brand di orologi di lusso. Hero: un torus-knot 3D in materiale oro lucido che ruota lentamente su sfondo nero, con depth of field (il bordo davanti a fuoco, il retro sfocato dolcemente), bloom sottile sulle alte luci e una vignettatura lenta. Titolo con grazie e un solo CTA. La camera va alla deriva quasi impercettibilmente (lento moto sinusoidale) per tenere viva la scena. Tutto sotto la piega è 2D standard: una griglia collezione a tre colonne e un'iscrizione newsletter. Limita il pixel ratio a 2 e metti in pausa il render loop quando l'hero è fuori schermo.

Due consigli di iterazione validi per tutti i prompt qui sopra: cambia una cosa per follow-up ("rendi il bloom più sottile" — non un'istruzione in cinque parti), e nomina l'atmosfera, non solo la geometria ("premium, scuro, sobrio" guida materiali e illuminazione più efficacemente delle sole descrizioni di oggetti).

Come si confronta VULK con Spline, Womp e Unicorn Studio?

Onestamente — strumenti diversi per utenti diversi, e gli editor visuali sono eccellenti in ciò che fanno:

Spline (gratis → $12/mese annuale) è l'editor 3D visuale standard per i designer: editing collaborativo in tempo reale, materiali, stati di animazione e interazioni configurate in una GUI. Il suo output è una scena Spline incorporata via viewer. Scegli Spline quando un designer ha bisogno del pieno controllo della direzione artistica e il pezzo 3D è autonomo. Il limite è il rovescio della medaglia: la scena non è codice che la tua app possa guidare, e il runtime del viewer aggiunge peso che non controlli.

Womp (gratis → $9.99/mese annuale) è modellazione 3D nel browser (basata su SDF, molto accessibile). È il modo più facile di creare vere forme 3D dal nulla, esportabili come mesh GLB/STL. È uno strumento di modellazione, non un builder di siti — abbinalo a qualcos'altro (incluso VULK: genera il sito, carica il tuo GLB esportato da Womp con useGLTF).

Unicorn Studio (gratis 10 pubblicazioni → $20/mese) fa effetti WebGL no-code — sfondi hero guidati da shader, distorsioni, effetti di testo — configurati con slider e incorporati. La via più rapida a un singolo effetto rifinito; non uno strumento per scene complete, interazioni o app.

Vectary (gratis → $15/mese annuale) punta ai configuratori di prodotto e alla visualizzazione AR via embed — forte per le viste prodotto e-commerce, limitato per tutto il resto.

VULK ($3.99 intro di 3 giorni → da $19.99/mese, solo a pagamento) è l'unico di questa lista il cui output è un'applicazione deployabile con sorgente Three.js/R3F modificabile. Questo è lo scambio: nessun editor visuale e nessun piano gratuito, in cambio di proprietà del codice, integrazione con l'app e zero runtime di embed. Se sei un designer con zero interesse per il codice, Spline ti renderà più felice. Se la scena 3D fa parte di un prodotto — collegata a stato, dati, route — il codice generato è l'unico approccio che non sbatte contro un muro.

Come si mantiene veloce un sito 3D?

Le prestazioni sono il punto dove muore la maggior parte dei siti 3D. La checklist completa, tutta promptabile ("applica le best practice di prestazioni 3D" funziona, ma essere espliciti è meglio):

• Comprimi la geometria con Draco. I modelli GLTF/GLB si riducono di 5–10× con la compressione Draco; useGLTF di drei gestisce la decodifica automaticamente. Un modello di prodotto da 4MB diventa ~500KB.
• Fai lazy-load del bundle 3D. Three.js + R3F sono ~150KB+ gzippati prima della tua scena. Fai code-splitting (React.lazy + Suspense) così il primo paint non aspetta mai WebGL, e mostra un'immagine poster statica finché la scena non si monta.
• Metti in pausa fuori schermo. Usa frameloop="demand" o un IntersectionObserver per fermare il render loop quando la scena non è visibile. Un hero che si anima tre schermate sotto lo scroll è puro consumo di batteria.
• Limita il device pixel ratio a 2. dpr={[1, 2]} sul Canvas. Renderizzare a DPR 3 su un telefono triplica il lavoro fragment per zero guadagno visibile.
• Metti a budget luci e ombre. Ogni luce dinamica che proietta ombre ri-renderizza la scena dal suo punto di vista. Una key light con ombre più un <Environment> HDRI batte quattro point light, visivamente e computazionalmente.
• Usa l'instancing sulla geometria ripetuta. Un campo di 500 asteroidi è un draw call con <Instances>, o 500 senza.
• Fornisci un fallback reduced-motion. Rispetta prefers-reduced-motion con un render statico — un requisito di accessibilità che fa anche da fallback per dispositivi modesti.
• Misura su un telefono vero. Il profiling GPU dei Chrome DevTools su un Android di fascia media dice la verità; il tuo laptop M-series no.

Come si fa il deploy di un sito 3D?

Un progetto R3F generato è un build Vite standard — un dist/ di asset statici — quindi il deploy è identico a quello di qualsiasi app React. Su VULK è un clic verso la rete edge di Cloudflare con URL live, domini personalizzati supportati. I progetti esportati (ZIP o GitHub) si deployano ovunque esista hosting statico: Cloudflare Pages, Vercel, Netlify, un bucket S3. Due note specifiche del 3D: assicurati che il tuo host serva gli asset .glb/.hdr con cache header lunghi (sono immutabili e spesso i file più grandi), e tieni le texture in formati compressi (KTX2/basis dove supportato, altrimenti JPEG/WebP ben dimensionati — una texture da 4096px su uno schermo di telefono è banda sprecata).