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 verrà eseguito direttamente nel browser. Per iterare il più velocemente possibile, apri due schede affiancate:
- Apri il gratuito Google Gemini (gemini.google.com).
- Apri un editor di codice online come CodePen.io o 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 solo file). Copia questo testo e incollalo in Gemini:
Sei un esperto di WebGL e della libreria Three.js. Il tuo compito è scrivere il codice HTML completo (inclusi CSS e JS all’interno) per una scena 3D funzionante. Requisiti: 1. Crea al centro un oggetto 3D rotante (TorusKnot o Icosahedron). 2. Importa Three.js e OrbitControls tramite un link CDN (unpkg o cdnjs) in un tag script. 3. Deve essere un “Single file” – tutto in un unico blocco di codice, nessuna import map. 4. Non usare modelli esterni (GLTF) né texture (JPG/PNG). Crea tutto in modo procedurale nel codice (MeshStandardMaterial, luci, colori). 5. Aggiungi luci puntiformi (PointLight) e ombre delicate. 6. Imposta lo sfondo su un colore molto scuro.
Passo 3: Esecuzione e verifica
Non appena Gemini genera il codice, copialo in alto a destra nel riquadro del codice. Vai alla seconda scheda (ad es. CodePen) e incolla tutto il codice SOLO nel campo HTML (lascia vuoti i campi CSS e JS, il nostro codice contiene già tutto).
Suggerimento: Vedrai subito l’oggetto 3D rotante. Prova a cliccarci con il mouse e a trascinarlo – grazie a OrbitControls lo puoi ruotare!
Passo 4: Iterazione in tempo reale
Ora inizia il vero lavoro in tempo reale. Torna su Gemini. Non è necessario scrivere nuovo codice o inviargli quello vecchio (se lo ricorda). Basta chattare e aggiungere gradualmente le richieste. Prova a inviargli, uno dopo l’altro, questi messaggi:
Questo è fantastico. Ora cambia il materiale dell’oggetto dal colore pieno a un ‘Wireframe’ luminoso (modello a rete) in blu e rosa neon.
Perfetto. Ora aggiungi sullo sfondo della scena un sistema di particelle che ruota lentamente (Points e PointsMaterial), che simulerà le stelle nello spazio.
Ottimo. 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, l’IA a volte commette un errore e su CodePen vedi solo uno schermo nero o bianco. Non devi conoscere la programmazione, ti basta descrivere il problema in chat:
L’ultimo codice che 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 correggerlo e mandami l’intera versione sistemata.
Fatto! Salvataggio del progetto
Quando sei soddisfatto al 100% del risultato, copia l’ultimo codice funzionante da CodePen. Su Windows apri Blocco note (Notepad) o su Mac TextEdit, incolla il codice e salva il file come ‘mio_3D_web.html’. Fatto! Hai la tua applicazione 3D.