Accesso all’app bloccato
Per ottenere l’accesso a questo tutorial 3D devi prima iscriverti al nostro canale YouTube.
Piano in tempo reale: siti 3D con Gemini
Dimentica i generatori di prompt. Ecco un piano interattivo completo, passo dopo passo. Da una chat vuota fino a un’esperienza 3D interattiva – solo tramite conversazione con l’intelligenza artificiale in tempo reale.
Passo 1: Preparazione dell’ambiente
Non devi installare nulla sul tuo computer. L’intero processo avverrà direttamente nel browser. Per iterare il più velocemente possibile, apri due schede affiancate:
- Apri il gratuito Google Gemini (gemini.google.com).
- Apri l’editor di codice online CodePen.io oppure PlayCode.io. Qui testeremo subito il codice generato, senza dover creare e salvare file HTML.
Passo 2: Master-Prompt iniziale
Il primo prompt è il più importante. Definisce i limiti per Gemini e imposta la base tecnologica (Three.js da CDN, tutto in un unico file). Copia questo testo e incollalo in Gemini:
Sei un esperto di WebGL e della libreria Three.js. Il tuo compito è scrivere un codice HTML completo (inclusi CSS e JS all’interno) per una scena 3D funzionante. Requisiti: 1. Crea un oggetto 3D rotante al centro (TorusKnot o Icosahedron). 2. Importa Three.js e OrbitControls tramite link CDN (unpkg o cdnjs) in un tag script. 3. Deve essere un “Single file” – tutto in un unico blocco di codice, senza import maps. 4. Non usare modelli esterni (GLTF) né texture (JPG/PNG). Crea tutto in modo procedurale nel codice (MeshStandardMaterial, luci, colori). 5. Aggiungi luci puntuali (PointLight) e ombre leggere. 6. Imposta lo sfondo su un colore molto scuro.
Passo 3: Avvio e controllo
Non appena Gemini genera il codice, copialo in alto a destra nel riquadro del codice. Vai nella seconda scheda (ad es. CodePen) e incolla l’intero codice SOLO nel campo HTML (lascia vuoti i campi CSS e JS, il nostro codice contiene già tutto al suo interno).
Suggerimento: Vedrai subito un oggetto 3D rotante. Prova a farci clic con il mouse e trascinare – grazie a OrbitControls potrai ruotarlo!
Passo 4: Iterazione in tempo reale
Ora inizia il vero lavoro in tempo reale. Torna su Gemini. Non è necessario scrivere un nuovo codice o inviargli quello vecchio (se lo ricorda). Ti basta chattare con lui e aggiungere gradualmente le richieste. Prova, una dopo l’altra, questi messaggi:
Questo è ottimo. Ora cambia il materiale dell’oggetto da colore pieno a un modello “Wireframe” luminoso (a rete) nei colori blu neon e rosa.
Perfetto. Ora aggiungi sullo sfondo della scena un sistema di particelle che ruota lentamente (Points e PointsMaterial), che simulerà stelle nello spazio.
Benissimo. E ora fai in modo che, quando muovo il mouse, i colori delle luci inizino a cambiare in modo fluido in base alla posizione del cursore sullo schermo.
Passo 5: Risoluzione dei problemi (Debugging)
Quando modifichi il codice in tempo reale, a volte l’IA commette un errore e su CodePen vedrai solo una schermata nera o bianca. Non devi conoscere la programmazione, ti basta descrivere il problema in chat:
L’ultimo codice che mi hai inviato non funziona. Lo schermo è completamente nero e niente ruota. Controlla se hai caricato correttamente OrbitControls e se la telecamera non si trova all’interno dell’oggetto. Prova a sistemarlo e mandami l’intera versione corretta.
Fatto! Salvataggio del progetto
Quando sei soddisfatto al 100% del risultato, copia l’ultimo codice funzionante da CodePen. Su Windows apri il Blocco note (Notepad) o su Mac TextEdit, incolla il codice e salva il file come “mio_web_3D.html”. Fatto! Hai la tua applicazione 3D.