Siti web 3D: quando valgono la pena e come mantenerli veloci

La risposta breve

Un sito web 3D vale la pena quando il soggetto è spaziale o quando muoversi al suo interno spiega qualcosa che un'immagine non riesce a spiegare: un prodotto da far ruotare, un luogo, un insieme di dati, un mondo. Non vale la pena quando si limita a decorare una pagina che una foto o un breve video spiegherebbero altrettanto bene. In ogni caso, il livello 3D ha un costo reale in termini di peso da scaricare, batteria e accessibilità, quindi costruisci la pagina in modo che funzioni anche senza e tratta il 3D come un miglioramento.

Questa guida si basa su due nostri progetti: Janus Observatory, un'esperienza nel browser con dieci mondi 3D, e dardo.studio, la cui home page si apre con una scena 3D in tempo reale.

Quando il 3D si guadagna il suo posto

• Il visitatore deve vedere qualcosa da più di un'angolazione: un prodotto, un edificio, un macchinario.
• Lo spazio è la storia: una mappa, una planimetria, un percorso attraverso dei luoghi.
• L'interazione spiega un sistema più in fretta del testo, come quando si confrontano scenari o si esplorano dati.
• L'esperienza di brand è il prodotto: lanci, mostre e campagne in cui l'atmosfera conta e i visitatori si aspettano di esplorare.

Quando non serve

• La scena 3D ripete ciò che un titolo e un'immagine dicono già.
• La maggior parte dei visitatori arriva da smartphone di fascia media con la connessione dati e ha bisogno di un'informazione in fretta, come un prezzo, un indirizzo o gli orari di apertura.
• Nessuno nel team si occuperà di modelli, codice e fallback dopo il lancio.

3D, video o immagini?

WebGL funziona in tutti i browser moderni. WebGPU è più recente e più veloce per alcuni tipi di lavoro, ma il supporto varia ancora, quindi prevedi un fallback. L'ingresso 3D di dardo.studio prova prima WebGPU e ripiega su WebGL 2, mentre le pagine dei servizi, dei lavori e dei contatti sono semplice HTML che non aspetta mai una scena 3D.

Cosa abbiamo imparato costruendo Janus Observatory

Janus Observatory trasforma dieci scenari pubblicati sul futuro della Terra in un racconto di 17 capitoli, un atlante e un osservatorio, con dieci mondi low-poly originali e un astronomo alieno articolato. Gira sul piano gratuito di Cloudflare Workers, che limita la dimensione dell'applicazione. Il report di rilascio del progetto del 27 settembre 2026 registra cosa è servito per mantenerlo veloce:

• Comprimi i modelli e tieni un fallback. I 59 modelli 3D vengono distribuiti come varianti gzip per un totale di 8,2 MB invece di 15,8 MB, il 47,9% in meno da scaricare. I browser che non riescono a decomprimerli ricevono i file originali.
• Decodifica fuori dal thread principale, poi fermati. La decodifica Meshopt gira su un unico worker in background che si spegne dopo cinque secondi di inattività.
• Fissa un budget per il JavaScript e fallo rispettare. Il JavaScript iniziale della home page pesa 197.059 byte compressi con gzip, contro un budget di 256.000 byte, e la build lo verifica.
• Attenzione alle raffiche di richieste. Un ciclo di prefetch speculativo nello stack Next.js e OpenNext ha generato 11.704 richieste in una traccia del browser non riuscita. La soluzione è stata disattivare il prefetch per quei link, e ora i test richiedono zero richieste speculative.
• Fissa la risoluzione invece di inseguire il frame rate. I canvas vengono renderizzati con un device pixel ratio fisso tra 1 e 1,5. Il report ha anche ritirato un dato precedente sul frame rate che dipendeva dall'abbassamento della risoluzione, quindi non ne citiamo nessuno.

Costruiscilo perché funzioni senza 3D

Janus ha una regola che determina tutto il resto: l'esperienza principale deve funzionare senza WebGL e senza AI. Tutte e dieci le schede degli scenari si caricano con JavaScript disattivato, i controlli funzionano senza WebGL, e rotazione da tastiera, focus visibile e movimento ridotto sono stati sviluppati insieme a ogni funzionalità. La sua pagina sull'accessibilità elenca i controlli, gli equivalenti non visivi e i limiti noti. L'obiettivo è il livello AA delle WCAG 2.2, verificato con test automatici in Chromium, Firefox e WebKit.

Questa regola aiuta anche la ricerca e gli assistenti AI: testi, nomi e dati stanno nell'HTML, non dentro un canvas.

Checklist per una pagina 3D veloce e accessibile

1. Scrivi prima la pagina senza 3D. Se la versione HTML non ha senso, il 3D non la salverà.
2. Decidi cosa spiega il 3D, ed elimina tutto ciò che serve solo a fare colpo.
3. Fissa dei budget per JavaScript, peso dei modelli e dimensione delle texture prima che inizi la modellazione, e verificali nella build.
4. Comprimi i modelli con strumenti come meshoptimizer, distribuiscili nel formato glTF e mantieni un fallback non compresso quando ti affidi a funzionalità recenti dei browser come DecompressionStream.
5. Carica la scena dopo i contenuti, e solo quando sta per entrare nel campo visivo.
6. Limita il pixel ratio così gli schermi ad alta densità non devono renderizzare il quadruplo dei pixel.
7. Rispetta prefers-reduced-motion, dai a ogni interazione un percorso da tastiera e metti un equivalente testuale accanto a ogni canvas.
8. Fai test su veri smartphone di fascia media e su più di un motore di rendering, poi monitora i Core Web Vitals dopo il lancio.

Quanto costa

Il 3D aggiunge tempo di modellazione, ottimizzazione e test oltre a design e sviluppo, e i fallback fanno parte del lavoro, non sono un extra. Quando lo quotiamo, compare come la voce "animazioni su misura, 3D o dati interattivi" tra i fattori di costo descritti nella nostra guida su quanto costa un sito web in Colombia.

Come Dardo realizza siti web 3D

Progettiamo e sviluppiamo esperienze 3D con il nostro servizio di siti web 3D interattivi, e lavori più leggeri di animazione e scroll con lo sviluppo creativo. Per Hyper abbiamo realizzato una storia 3D guidata dallo scroll con React Three Fiber, che trasforma segnali sparsi in un unico profilo cliente. Se hai un'idea che ha bisogno di spazio per essere capita, raccontacela.