Da un prompt a un sito 3D in 30 secondi: 6 test reali

Molte raccolte di prompt per siti 3D fanno pagare perfino il testo del prompt, oppure mostrano un video demo senza rivelare le istruzioni usate. Qui invece trovi sei prompt completi: puoi incollarli in Claude così come sono, oppure modificare una riga per usarli con Lovable, Bolt o Cursor. Li abbiamo eseguiti tutti su un modello live: cinque hanno prodotto pagine Three.js funzionanti e ogni screenshot qui sotto è un render reale, non un mockup.

Sei prompt per siti 3D da copiare subito

Ogni prompt richiede una pagina HTML in un unico file, con Three.js caricato da CDN. È un vincolo importante: il file si apre localmente in qualsiasi browser, è facile da passare a uno sviluppatore o da inserire in un blocco di codice personalizzato. Inoltre costringe il modello a mantenere la scena autosufficiente, senza distribuire import e dipendenze in tutto il progetto.

1. Hero con galassia di particelle

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.

Generato in 27 secondi e 3.692 token di output. La galassia ruota, il trascinamento per orbitare funziona e il pulsante resta cliccabile nonostante l'overlay. C'è però un difetto concreto: la sottoriga finisce sopra il nucleo luminoso della galassia e si legge male. La correzione è nelle note del test più avanti.

2. Vetrina prodotto controllata dallo scroll

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.

È stata la più pesante tra le cinque generazioni riuscite, con 63 secondi e 7.023 token di output, ma anche il risultato più convincente. Lo scroll porta la fotocamera attorno all'oggetto e il materiale cambia colore per ogni sezione esattamente come richiesto:

Anche l'interpolazione lerp smorzata è stata rispettata: il movimento ha la pesantezza e la cura di un sito da agenzia, non l'effetto di una slideshow agganciata allo scroll.

3. Sfondo fluido con gradiente 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 secondi, 3.830 token, riuscito al primo tentativo. La riga "single quad, no postprocessing passes" è il guardrail sulle prestazioni: senza questa indicazione i modelli tendono a ricorrere a EffectComposer e passaggi bloom, che fanno crollare il frame rate sulle GPU integrate.

4. Portfolio 3D in fly-through: quello più ostinato

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.

Ha richiesto tre esecuzioni e non è ancora pronto da pubblicare. Lo screenshot spiega comunque perché vale la pena mostrarlo: la card viene renderizzata, ma la fotocamera è posizionata dietro di essa e il titolo risulta specchiato. Il primo tentativo ha superato il nostro limite di 16.000 token di output a metà file. Il secondo, con la riga "keep the code compact" — presente nel prompt proprio per questo motivo — ha renderizzato le card ma ha fatto passare la fotocamera direttamente attraverso di loro. Il terzo ha corretto il clipping, perdendo però il collegamento tra scroll e fotocamera. Coreografare un percorso della camera insieme a texture per ogni card è davvero più difficile per i modelli rispetto alle scene precedenti: metti in conto una sessione di debug oppure semplifica con una griglia curva statica e stati hover.

5. Viewer prodotto interattivo

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.

Riuscito al primo tentativo: 66 secondi e 7.719 token. I campioni colore e il toggle metallo/opaco aggiornano il materiale in tempo reale; inoltre il modello ha aggiunto una piccola attenzione non richiesta, una nota che spiega come la rotazione sia bloccata sull'asse orizzontale per mantenere il prodotto nell'inquadratura.

6. Sito business 3D in una pagina

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 secondi e 7.419 token. Il modello ha inventato il nome dello studio, costruito le quattro sezioni e posizionato un icosaedro low-poly esattamente nel punto richiesto. Il nostro primo tentativo con questo prompt ha raggiunto un limite di output di 8.000 token ed è arrivato troncato: se chiami un modello via API, per prompt relativi a pagine intere imposta un limite di almeno 16.000 token di output.

Cosa è successo nei test

Tre esecuzioni per prompt su un singolo modello non sono un benchmark, ma un controllo a campione su dove sia arrivata la generazione prompt-to-3D a metà 2026. Note sul metodo: claude-sonnet-5 via API il 17 luglio 2026, impostazioni predefinite, nessun system prompt; risultati renderizzati in Chrome desktop a 1280×720 su un MacBook Apple Silicon. Nelle esecuzioni riuscite, il modello ha scelto autonomamente la build UMD Three.js r128 da una CDN pubblica.

L'unico difetto visivo nelle cinque pagine funzionanti riguarda il prompt 1: la sottoriga cade sulla parte più luminosa della galassia e diventa quasi illeggibile. È bastata una riga di follow-up — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. — per risolvere. È il filo conduttore dei test: la scena 3D in sé tende a uscire corretta, mentre il budget di iterazione finisce su tipografia, contrasto degli overlay e, nel caso del portfolio, coreografia della fotocamera.

A questa scala il costo è irrilevante. L'intero test — nove generazioni comprese le ripetizioni del portfolio, circa 46.000 token di output — è costato ben meno di un dollaro. Lo abbiamo eseguito tramite AIReiter, che rivende l'accesso alle API Claude a un quinto del prezzo ufficiale per token: anche una sessione di iterazione ostinata resta nell'ordine degli spiccioli.

Come scrivere un prompt per un sito 3D

I prompt che hanno superato il test condividono cinque elementi. Mantienili tutti e le probabilità di riuscire al primo tentativo aumentano sensibilmente.

1. Un solo soggetto per la scena. Una galassia, un torus-knot, un campo di gradienti. Nei nostri test e nella maggior parte degli esempi condivisi dalla community, è quando un prompt richiede diverse funzioni 3D scollegate nella stessa pagina che i modelli iniziano a perdere requisiti.
2. Un motore del movimento. Può essere il tempo (slowly rotates, driven by a time uniform) oppure lo scroll (as the user scrolls, the camera orbits). Indica esplicitamente quale vuoi: limitarsi a "animated" lascia al modello la scelta, spesso banale. Nota dal fallimento del portfolio: controllare con lo scroll un oggetto è affidabile; controllare una fotocamera lungo un percorso tra oggetti è il punto in cui tutto tende a rompersi.
3. L'interazione. OrbitControls per la rotazione tramite trascinamento ha funzionato in ogni esecuzione riuscita del test. Se sovrapponi testo al canvas, chiedi pointer-events: none sul contenitore dell'overlay e pointer-events: auto sui pulsanti: altrimenti il livello testuale intercetta trascinamenti e clic destinati alla scena.
4. I contenuti dell'overlay. Fornisci il testo esatto della headline tra virgolette. I modelli riempiono il copy non specificato con slogan generici che dovrai comunque sostituire.
5. Vincoli di prestazioni e dimensioni. Numero di particelle, single quad, no postprocessing oppure low-poly aiutano a mantenere la pagina veloce; keep the code compact mantiene l'output entro i limiti token delle API. Due delle nostre nove esecuzioni sono morte per un limite di output prima ancora che emergesse un problema di qualità del codice.

Il vocabolario che spinge il modello verso un vero 3D anziché una sua imitazione piatta in CSS: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Questi termini contano perché corrispondono a nomi API reali: il modello scrive quindi per librerie viste durante l'addestramento anziché improvvisare.

La scorciatoia: incollare il codice

Per effetti che vanno oltre ciò che riesci a descrivere, c'è una seconda tecnica. Trova un effetto Three.js completo su CodePen, incolla il codice sorgente nel tuo strumento AI e usa soltanto il prompt Add this 3D animation to the hero. Il modello traduce lo snippet nel tuo stack — componenti React, configurazione di build, struttura delle sezioni — che di solito è la parte più noiosa. Builder.io ha documentato il trucco con un'animazione di pianeta da 50.000 particelle, inclusa la stessa correzione di layering pointer-events: none, nella propria guida.

È il percorso con il maggior impatto quando cerchi una finitura da sito premiato: la matematica dello shader arriva da una persona che l'ha ottimizzata, mentre all'AI resta solo l'integrazione.

Quali strumenti accettano questi prompt

I sei prompt qui sopra sono indipendenti dallo strumento: funzionano con tutto ciò che scrive e visualizza HTML/JS. Le differenze tra piattaforme riguardano la forma dell'output e la proprietà del codice, verificate il 17 luglio 2026:

Due di questi meritano una nota. La promessa di VULK è generare vero codice React Three Fiber — scene WebGL interattive, non un header video in loop — e i siti mostrati come vetrina lo confermano. Codice reale anziché un video header è precisamente la distinzione da verificare prima di pagare qualsiasi "AI 3D website builder". Se invece preferisci sfogliare prompt anziché scriverli, MotionSites mantiene una libreria categorizzata pensata per Lovable, Bolt, Cursor e Claude. Una parte è copiabile gratuitamente, il resto richiede un abbonamento:

Dove i prompt raggiungono il loro limite

Una domanda ricorrente nelle discussioni su r/lovable e r/web_design è se il prompt giusto possa riprodurre siti come mont-fort.com o le pagine Labs di Noomo Agency. La risposta onesta è no, non partendo dal solo prompt. Quei siti si basano su modelli GLTF personalizzati, illuminazione diretta artisticamente e shader su misura: risorse che un prompt testuale non può evocare dal nulla. Un prompt può però darti le meccaniche di quei siti — fotocamere guidate dallo scroll, sfondi shader, movimento smorzato — usando geometrie segnaposto. Sostituire un vero file modello colma parte della distanza, ma illuminazione, materiali e fallback mobile rimangono lavoro di design concreto. Il fallimento del portfolio fly-through visto sopra insegna la stessa lezione in piccolo: più un prompt si avvicina a scene coreografate con molti oggetti, maggiore è l'iterazione umana necessaria.

Tre modalità di errore coprono la maggior parte delle generazioni difettose, e per ciascuna basta una correzione di una riga:

• Schermo nero, nessun errore visibile. Di solito è un'incompatibilità tra import ES module e CDN. Prompt di correzione: Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps. (r128 è la versione scelta spontaneamente nelle nostre esecuzioni di test e funziona ancora; le versioni Three.js più recenti hanno abbandonato il percorso UMD, quindi fissare la versione evita il mismatch.)
• Fluido su desktop, scattoso sui telefoni. Il numero di particelle era accettabile su laptop, ma non su mobile. Prompt di correzione: Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2.
• La scena 3D funziona, ma nella pagina non si può cliccare nulla. Il canvas o un overlay stanno intercettando gli eventi. Prompt di correzione: Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.

E uno emerso direttamente dai nostri test: il testo su una card 3D viene renderizzato specchiato. La fotocamera sta guardando il retro del piano. Prompt di correzione: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.

FAQ

Esistono prompt gratuiti per siti 3D?

Sì. I sei di questo articolo sono completi e gratuiti da copiare; anche DocsBot e il piano gratuito di MotionSites ne offrono altri. Le librerie a pagamento acquistano soprattutto quantità e varietà già testata, non un tipo diverso di prompt.

Questi prompt funzionano con Lovable o Bolt?

Sì, con una modifica: elimina il requisito "single-file HTML", perché queste piattaforme impostano progetti React. Mantieni tutto il resto — soggetto della scena, motore del movimento, interazione e vincoli di prestazioni — poiché si trasferisce direttamente.

Devo conoscere Three.js per usare un prompt per siti 3D?

No per generare, un minimo per iterare. I prompt qui sopra includono il vocabolario Three.js necessario. Sapere cosa siano OrbitControls o un fragment shader aiuta a chiedere modifiche precise, invece di rigenerare alla cieca.

Qual è il miglior strumento AI per un sito 3D?

Per un effetto in singolo file o una hero section, direttamente Claude: mantieni il sorgente e paghi a token. Per un sito ospitato con backend, Lovable o Bolt nei rispettivi piani gratuiti, oppure VULK se vuoi specificamente codice React Three Fiber esportabile.

Una hero 3D danneggia prestazioni o SEO?

Solo se glielo permetti. Limita il 3D a una scena, aggiungi i guardrail mobile indicati sopra e mantieni headline e testo del corpo in vero HTML sopra il canvas, come fanno tutti e sei i prompt. I crawler leggono il livello testuale e i Core Web Vitals dipendono soprattutto da tutto il resto che la pagina carica.