Capire Three.js per lo sviluppo di giochi browser

Aggiornato il 18 luglio 2026 — rinfrescato con dati attuali della piattaforma sulla generazione di giochi browser e i workflow 3D assistiti dall'IA.

Cos'è Three.js e perché conta per i giochi browser?

Three.js è la libreria 3D JavaScript più utilizzata. Astrae la complessità del WebGL grezzo in un'API amichevole che gestisce scene graph, camere, illuminazione, materiali e rendering — un gioco che richiederebbe migliaia di righe di WebGL grezzo ne richiede centinaia in Three.js. Combinata con un motore fisico come cannon-es, alimenta esperienze 3D interattive — dai configuratori di prodotto ai giochi browser completi — che girano in qualsiasi browser moderno senza plugin né installazioni.

Capire questi concetti fondamentali conta sia che tu scriva Three.js a mano, sia che lavori con codice di gioco generato dall'IA. Giochi ed esperienze interattive sono la categoria di app #2 più generata su VULK con il 5,4% di tutti i progetti, e la piattaforma ha registrato 2.438 richieste utente che menzionano 3D o WebGL (dati della piattaforma VULK, luglio 2026, N = 11.355 progetti) — quindi molte persone leggono e modificano codice Three.js che non hanno scritto da zero. Questa guida ti dà il modello mentale per farlo con sicurezza.

Quali sono i blocchi fondamentali di un'applicazione Three.js?

Ogni applicazione Three.js si costruisce attorno a tre oggetti fondamentali — e a un loop che li lega:

Il render loop è il battito cardiaco di ogni applicazione Three.js: aggiorna le posizioni degli oggetti, applica i calcoli fisici e ordina al renderer di disegnare il frame corrente. Tenerlo efficiente è la chiave di performance fluide.

Come funzionano mesh, materiali e geometria?

Gli oggetti visibili in Three.js si chiamano Mesh, e ogni Mesh è una combinazione di Geometry (la forma) e Material (l'aspetto). La Geometry definisce vertici, facce e normali che compongono una forma 3D. Il Material definisce come la luce interagisce con quella forma — colore, riflettività, rugosità e trasparenza.

Three.js offre sia materiali di base (MeshBasicMaterial, che ignora l'illuminazione) sia materiali physically-based rendering (PBR: MeshStandardMaterial, MeshPhysicalMaterial) che simulano un'interazione realistica della luce. I materiali PBR usano mappe di metalness e roughness per creare superfici convincenti come metallo spazzolato, cemento consumato o vetro lucidato.

Come funziona l'illuminazione in Three.js?

L'illuminazione è ciò che rende reali le scene 3D. Three.js offre diversi tipi di luce: AmbientLight per l'illuminazione di base, DirectionalLight per raggi paralleli come il sole, PointLight per sorgenti omnidirezionali come lampadine, SpotLight per fasci focalizzati e HemisphereLight per la sfumatura cielo-terra in esterni. La maggior parte delle scene usa una combinazione di luce ambientale e direzionale come base, con luci puntuali e spot per effetti specifici.

Le ombre aggiungono un ulteriore livello di realismo ma hanno un costo in performance. Ogni luce che proietta ombre richiede una passata di rendering aggiuntiva. Per i giochi browser, limitare le luci con ombre a una o due direzionali è un'ottimizzazione comune.

Come si aggiunge la fisica con cannon-es?

Three.js gestisce il rendering, ma non simula la fisica. Per movimento realistico, collisioni e gravità, la maggior parte dei giochi browser abbina Three.js a cannon-es (un fork mantenuto di cannon.js). Il motore fisico esegue il proprio loop di simulazione, e tu sincronizzi le posizioni dei corpi fisici con quelle delle mesh Three.js a ogni frame.

I concetti chiave di cannon-es includono i Bodies (oggetti con massa e forma), le Shapes (sfere, box, cilindri, involucri convessi) e il World (il contenitore della simulazione con gravità e rilevamento delle collisioni). Per la fisica dei veicoli, cannon-es fornisce una classe RaycastVehicle che simula sospensioni, sterzo e attrito delle ruote.

Come si caricano i modelli 3D?

Le forme semplici si possono creare con la geometria integrata, ma gli oggetti complessi come personaggi, veicoli ed edifici vengono tipicamente creati in software di modellazione 3D e caricati come file GLB o GLTF. Il GLTFLoader di Three.js se ne occupa, analizzando il file e restituendo uno scene graph da aggiungere alla tua scena.

GLTF (GL Transmission Format) è diventato lo standard del 3D web perché supporta mesh, materiali, texture, animazioni e gerarchia di scena in un unico formato binario efficiente. L'ottimizzazione dei modelli — ridurre i poligoni, comprimere le texture, usare layout UV efficienti — è importante per le performance nel browser.

Quali ottimizzazioni di performance contano di più nel browser?

I giochi browser affrontano vincoli di performance più severi delle applicazioni native. Strategie chiave:

• Rendering istanziato: Disegnare molte copie della stessa geometria (alberi, edifici, particelle) in una singola draw call
• Level of detail (LOD): Mostrare modelli più semplici per oggetti lontani e dettagliati per quelli vicini
• Frustum culling: Saltare il rendering degli oggetti fuori dalla vista della camera (Three.js lo fa automaticamente)
• Atlas di texture: Combinare più texture in un'unica immagine per ridurre le draw call
• Object pooling: Riutilizzare gli oggetti invece di crearli e distruggerli per ridurre la garbage collection

Come si struttura un game loop?

Un game loop tipico in Three.js segue questo schema: leggere l'input (tastiera, mouse, gamepad), aggiornare lo stato di gioco (posizione del giocatore, comportamento degli NPC, step di fisica), sincronizzare i corpi fisici con le mesh, aggiornare la camera e renderizzare il frame. Tenere ogni passo efficiente assicura che il gioco giri fluido a 60fps.

Per giochi complessi, separare la logica in moduli — una classe Engine per rendering e loop, una classe World per la geometria dei livelli, una classe Character per il controllo del giocatore, una classe Vehicle per le meccaniche di guida — mantiene il codice organizzato e manutenibile.

Serve ancora imparare tutto questo a mano?

Sempre meno — ma i concetti contano ancora. La generazione di codice con IA produce oggi giochi Three.js completi da descrizioni in linguaggio naturale: su VULK, un prompt come "costruisci un endless runner 3D con ostacoli e contatore punti" genera setup di scena, game loop, integrazione della fisica e gestione dell'input come codice reale ed editabile, renderizzato in un'anteprima live in pochi secondi. La generazione è verificata — il render gate di VULK carica la scena in un browser reale e boccia la generazione se il canvas renderizza vuoto.

Ciò che i concetti di questa guida ti danno è la capacità di iterare con intelligenza: sapere che le ombre costano passate di rendering, che l'instancing riduce le draw call e che i corpi fisici si sincronizzano con le mesh a ogni frame ti permette di dirigere l'IA con precisione — e di modificare il codice generato quando serve qualcosa di non standard.