JT-11: il prodotto che si apre davanti a te

Il problema

Chi produce componenti ha un problema che il cliente non vede: il valore sta dentro. La qualità di una lavorazione, l'ingegno di un assemblaggio, la cura di un dettaglio che nessuno noterà mai finché il pezzo non si rompe. Sul sito, però, tutto questo diventa una foto da catalogo e un PDF da scaricare. Che nessuno apre.

Nei manuali tecnici esiste da sempre uno strumento che risolve proprio questo: la vista esplosa. Il prodotto si apre, ogni pezzo si stacca dagli altri lungo il suo asse, e in un colpo d'occhio si capisce com'è fatto. Ci siamo chiesti: e se la vista esplosa fosse viva, in 3D, e la guidasse chi visita il sito con il suo scroll?

Perché un motore

Abbiamo scelto il soggetto più difficile che ci venisse in mente: un turbofan, il motore degli aerei di linea. Centinaia di pale, sette moduli rotanti, tubazioni, cablaggi, gusci che si aprono. Se la tecnica regge su un oggetto così, regge su qualsiasi prodotto.

Per raccontarlo abbiamo inventato un costruttore, Dima Aerospace, e il suo motore per aerei regionali, il JT-11: 130 kN di spinta, rapporto di bypass 11:1, consumi ridotti del 15%. Una scheda prodotto credibile, con un'identità scura, tecnica, da hangar.

La storia che si scorre

La pagina si apre sul motore intero, che arriva da lontano mentre il fan prende giri. Poi è lo scroll a condurre, in otto capitoli:

1. Il JT-11. Il motore montato, con i tre numeri che contano.
2. La carenatura. I due gusci in composito si aprono e oltre 1.400 rivetti saltano via dalla loro sede.
3. Il nucleo. Cade il carter e compare la "vestizione": collettore del carburante, cablaggi, attuatori, serbatoio dell'olio.
4. Il fan. Diciotto pale a scimitarra si staccano in avanti con l'ogiva.
5. Il compressore. Gli stadi di bassa e alta pressione si separano, disco dopo disco.
6. La camera di combustione. Venti iniettori e un fronte di fiamma che pulsa.
7. Le turbine e l'ugello. Le leghe scaldate cambiano colore verso l'uscita.
8. Esplora. La storia lascia il comando: il motore si gira, si ingrandisce, si interroga pezzo per pezzo.

In ogni momento, passando il mouse (o toccando sul telefono) un componente si illumina e compare la sua scheda: cos'è, a cosa serve, un dato tecnico. È la differenza tra guardare un prodotto e capirlo.

Come l'abbiamo costruito

1 · Un modello 3D parametrico

Il motore non è un modello scaricato: l'abbiamo costruito da zero in Blender, scrivendolo in Python. Ogni componente nasce da parametri ingegneristici: il profilo di un'ogiva, il numero di pale di uno stadio, la loro corda, la torsione dalla radice alla punta, lo spessore del profilo alare. Cambiando un numero si rigenera il pezzo, e tutto il motore resta coerente.

• Pale con un profilo alare vero, arrotondato davanti e sottile dietro, con torsione e curvatura variabili lungo l'altezza. Il fan ha la forma "a scimitarra" dei turbofan di ultima generazione.
• Moduli costruiti come nella realtà: dischi con mozzo, anima e corona, distanziali tra gli stadi, anelli di punta sulle turbine di bassa pressione.
• La vestizione, cioè tutto quello che rende industriale un motore: collettore del carburante con venti alimentazioni, anelli di comando degli statori variabili, fasci di cavi con connettori, termocoppie, flange imbullonate, ugello con miscelatore a sedici lobi.
• Ogni pezzo sa dove andare. Nel modello ogni componente porta con sé la sua direzione di esplosione; i rivetti hanno anche la loro traiettoria di volo.

2 · Pronto per il web, senza perdere il realismo

Un modello da render pesa centinaia di megabyte. Il nostro arriva al browser in 2,2 MB, 130.000 triangoli.

• Ombre di contatto pre-calcolate. Le ombre dove i pezzi si toccano vengono calcolate in anticipo con il motore di rendering di Blender e salvate nei vertici del modello: nel browser costano zero e danno la profondità di un render.
• Formato glTF compresso con Draco, lo standard aperto per il 3D sul web, decompresso dal browser in WebAssembly.
• Materiali procedurali leggeri. Le righe di tornitura dei metalli e la grana della vernice sono texture da pochi kilobyte disegnate dalla pagina stessa; i colori da calore di turbine e ugello sono dipinti sui vertici.

3 · Il 3D nel browser

• three.js su WebGL, ospitato sul nostro server, senza dipendenze esterne: illuminazione da studio, riflessi ambientali, un leggero bagliore sulle sole fonti di luce.
• Una regia guidata dallo scroll. Ogni gruppo di pezzi ha la sua finestra di apertura; la camera segue un percorso isometrico che si calcola una sola volta all'apertura, misurando l'ingombro del motore in ogni istante, così l'inquadratura resta stabile e non "balla".
• Interrogare i pezzi. Un raggio lanciato dal puntatore (raycasting) riconosce il componente sotto il mouse; le schede vivono in HTML, quindi restano nitide e accessibili.
• Modalità Esplora. Un tocco blocca lo scroll e libera la scena: un dito ruota, due dita ingrandiscono e spostano.

4 · Fluida su qualsiasi dispositivo

Un 3D spettacolare che va a scatti è peggio di nessun 3D. Per questo la pagina misura i propri fotogrammi al secondo e, se un dispositivo fatica, riduce da sola la risoluzione e poi gli effetti, prima che l'utente se ne accorga; quando torna margine, risale. L'abbiamo collaudata con Playwright su Chromium ed Edge e su WebKit, il motore di Safari, simulando telefoni fino a quattro volte più lenti di uno attuale: resta sopra i 50 fotogrammi al secondo.

Per chi è

Il motore è solo il soggetto. La stessa tecnica funziona per qualsiasi prodotto che abbia un "dentro" da raccontare:

• Componentistica e meccanica di precisione. Riduttori, valvole, pompe, cuscinetti, attuatori: far vedere la qualità interna invece di descriverla.
• Macchinari e impianti. Una macchina utensile o una linea di confezionamento che si scompone in moduli, ognuno con la sua scheda.
• Prodotti finiti. Elettrodomestici, biciclette, attrezzatura sportiva, arredo, elettronica di consumo: l'esploso è il modo più immediato per dire "guarda com'è fatto bene".
• Fiere ed eventi. La stessa pagina gira su uno schermo grande in stand, a tutto schermo, oppure su un tablet in mano al commerciale.
• Configuratori. Taglie, varianti e accessori che si montano e smontano davanti al cliente.
• Manutenzione e formazione. Una guida interattiva all'assemblaggio per tecnici, installatori e rivenditori.

Si può partire dai file CAD che l'azienda ha già (STEP, SolidWorks, Inventor, Fusion), che convertiamo e alleggeriamo per il web, oppure da disegni e fotografie, ricostruendo il modello come abbiamo fatto qui.

Il cliente non compra un componente. Compra la certezza che dentro sia fatto bene: fagliela vedere.

Concept realizzato da Glow Creative Agency a scopo dimostrativo. Dima Aerospace e il motore JT-11 sono inventati: nomi, prestazioni, materiali e dati tecnici sono plausibili ma non reali, e ogni somiglianza con costruttori o motori esistenti è casuale. Modello 3D, grafica, animazioni e codice sono originali. Libreria 3D: three.js (licenza MIT). Luce da studio: Poly Haven (CC0).