React e Three.js non sono alternative perfettamente sovrapponibili. Three.js è il motore 3D; React è un modo di organizzare l'interfaccia. Con React Three Fiber si descrive una scena Three.js attraverso componenti React. Il vero confronto è quindi tra un'integrazione diretta, una scena gestita in modo dichiarativo e un sito tradizionale che usa il 3D solo come modulo isolato.
Quando HTML e JavaScript sono la soluzione migliore
Per un sito corporate, una landing page o un portfolio, il contenuto deve essere disponibile subito, leggibile dai motori e robusto anche se il rendering 3D non parte. Una base HTML semantica con CSS e JavaScript modulare offre un vantaggio importante: la pagina rimane semplice e il canvas è un livello progressivo, non il contenitore dell'intera esperienza.
In questo scenario Three.js può gestire una hero, un configuratore leggero o una sezione interattiva. Il resto del documento continua a usare titoli, paragrafi, link e moduli normali. Si riducono dipendenze e quantità di JavaScript iniziale; inoltre è più facile prevedere un'immagine statica o una variante ridotta per dispositivi meno potenti.
Il principio da ricordare
Se il 3D è decorativo o concentrato in una sola sezione, non serve trasformare l'intero sito in una single-page application. Isolare la scena rende manutenzione, accessibilità e performance molto più controllabili.
Quando React Three Fiber ha senso
React Three Fiber è particolarmente efficace quando la scena è parte dello stato applicativo: configuratori di prodotto, editor, mappe tridimensionali, esperienze con molti pannelli sincronizzati o applicazioni in cui componenti UI e oggetti 3D reagiscono agli stessi dati. Il modello dichiarativo aiuta a scomporre scene complesse e a riutilizzare componenti.
Il vantaggio cresce se il team usa già React, dispone di test e convenzioni condivise e deve aggiornare spesso il prodotto. Ma non è gratuito: framework, reconciler, librerie accessorie e logica di hydration aumentano il costo iniziale. In una vetrina di poche pagine questa complessità può non produrre alcun ritorno concreto.
Cinque criteri per decidere
- Centralità del 3D. È il prodotto o un supporto narrativo? Nel secondo caso, un modulo Three.js indipendente è spesso sufficiente.
- Stato condiviso. Se dati, filtri e configurazioni devono sincronizzarsi tra molti elementi, React può semplificare il flusso.
- Competenze del team. Uno stack familiare è quasi sempre più sostenibile di uno scelto per tendenza.
- Budget prestazionale. Misura il peso totale, il tempo di interazione e la fluidità sui telefoni reali, non solo su un computer potente.
- Durata del progetto. Un'esperienza di campagna e un SaaS mantenuto per anni richiedono architetture diverse.
SEO e 3D: il contenuto non deve vivere nel canvas
I motori di ricerca comprendono bene un documento con gerarchia semantica, collegamenti interni e testo utile. Un canvas WebGL, invece, comunica poco sul significato della pagina. Titolo, proposta di valore, descrizione dei servizi, prove, FAQ e call to action devono restare nel DOM. Il 3D può migliorare comprensione e memorabilità, ma non deve sostituire l'informazione.
Per la velocità conviene caricare texture e modelli solo quando servono, comprimere le risorse, limitare draw call e risoluzione del renderer, sospendere l'animazione fuori viewport e rispettare prefers-reduced-motion. Su mobile si può ridurre il numero di oggetti o mostrare una variante statica. Un fallback ben progettato non è una rinuncia: è parte dell'esperienza.
La scelta per un sito vetrina creativo
Per la maggior parte dei siti di studio o azienda sceglierei HTML semantico, CSS moderno e JavaScript modulare, aggiungendo Three.js solo nelle aree in cui il movimento racconta qualcosa. Passerei a React quando l'interfaccia diventa un vero prodotto applicativo o quando la scena richiede stato condiviso e componenti riutilizzabili.
La tecnologia migliore è quella che rende il progetto più chiaro per l'utente e più sostenibile per chi lo mantiene.
Domande frequenti
Three.js funziona senza React?
Sì. È una libreria JavaScript autonoma e può essere importata direttamente in una pagina HTML o in un progetto con bundler.
React migliora automaticamente la SEO?
No. La SEO dipende da rendering, contenuti, architettura, performance e segnali di qualità. React può essere reso indicizzabile, ma introduce decisioni aggiuntive.
Conviene riscrivere un sito HTML solo per aggiungere il 3D?
Di solito no. È spesso più efficace integrare una scena isolata, misurarla e mantenere il contenuto principale indipendente.