Come inserire un modello CAD 3D nel tuo sito web: 4 modi a confronto

Per inserire un modello CAD 3D nel tuo sito, esporta l'assieme come file STEP, convertilo in un modello di visualizzazione leggero in formato glTF o GLB e mostra quel modello in un visualizzatore web nella pagina prodotto. Non serve mai pubblicare il file CAD in sé: il browser scarica solo il modello di visualizzazione, che per il collettore ICM-21 di Tutamen, composto da 42 componenti, è un download di 2,0 MB ricavato dal suo file STEP.

Lo STEP è il formato 3D neutro che ogni sistema CAD diffuso sa esportare (ISO 10303). Il glTF è il formato aperto per il 3D sul web, sviluppato dal Khronos Group, e il GLB è il glTF in un unico file. I quattro modi per passare dall'uno all'altro si distinguono soprattutto per ciò che può fare l'acquirente, ciò che consegni e chi si occupa di farlo funzionare nel tempo.

Perché un sito web non può mostrare direttamente un file STEP?

Un file STEP descrive un prodotto con superfici matematiche esatte, mentre un browser sa disegnare solo triangoli piatti. Ogni faccia va prima ricoperta di piccoli triangoli (i poligoni a cui ci si riferisce parlando di «mesh»), un passaggio chiamato tassellazione. Più triangoli rendono le curve più morbide e il file più pesante, quindi un buon convertitore si ferma quando le curve appaiono lisce a schermo intero.

La conversione decide anche cosa può fare la pagina. Un buon modello di visualizzazione mantiene ogni componente separato, con un nome e un materiale, così l'assieme si può esplodere e si può cliccare su ogni componente. Memorizza una sola volta i componenti ripetuti: il file del collettore ICM-21 contiene 214.168 triangoli e lo schermo ne disegna 654.948. Non include albero delle feature, schizzi o parametri, quindi valori come massa e volume vanno prima misurati sul CAD esatto, e una buona pagina precisa che, dove i due differiscono, fa fede la scheda tecnica.

Ecco cosa ha prodotto questa catena per i quattro modelli online di Proofscene, misurato sui file caricati dalle loro pagine:

Il download è ciò che il visitatore aspetta; la pagina e il visualizzatore che lo circondano aggiungono circa mezzo megabyte. *STRAVIK, HALVORN e ARTIXO sono marchi di fantasia che Proofscene ha modellato internamente per rappresentare altri settori; il collettore ICM-21 è il prodotto reale di Tutamen, costruito dal suo file STEP.

Quali sono i quattro modi per inserire un modello CAD nel tuo sito?

I quattro modi sono l'incorporamento di un visualizzatore online gratuito, una piattaforma 3D in hosting o un configuratore, una pagina che costruisci in autonomia su un componente web aperto come model-viewer di Google e una pagina prodotto interattiva realizzata su misura per te a partire dal CAD. Ecco come si confrontano sulle domande che contano per un prodotto industriale:

Quale strada è adatta al tuo prodotto?

Un visualizzatore gratuito è adatto a un'occhiata veloce a un componente, per un cliente. È la strada più rapida e quella in cui consegni di più, perché un visualizzatore CAD gratuito lavora direttamente sul tuo file STEP.

Una piattaforma in hosting è adatta ai prodotti che si vendono per aspetto e opzioni, in cui l'acquirente sceglie un colore o una misura. E li sceglie in un configuratore.

Il fai da te con model-viewer, il componente web gratuito di Google basato sulla libreria three.js, è adatto a un team web con tempo a disposizione e a componenti semplici che basta far ruotare. Gestisce bene rotazione, etichette e AR. Il prezzo da pagare è convertire, semplificare, illuminare e provare ogni prodotto, di nuovo a ogni modifica. Una sezione, una modalità a raggi X o un elenco dei componenti cliccabile richiedono codice che devi scrivere tu.

Una pagina prodotto interattiva su misura è adatta ai prodotti industriali il cui valore sta dentro l'involucro (pompe, valvole, collettori, giunti robotici) e agli acquirenti che controllano ogni numero. Proofscene la integra nel tuo sito, con un solo tag iframe o come pagina in hosting su tuaazienda.proofscene.com; il collettore ICM-21 di Tutamen è andato online il giorno stesso in cui è arrivato il suo file STEP.

Se il tuo prodotto rientra in quest'ultimo gruppo, invia il file STEP e la scheda tecnica e porta il tuo prodotto in 3D. Le pagine prodotto su misura sono incluse in Proofscene Business ed Enterprise, e prima di iniziare qualsiasi lavoro il nostro team ti dice cosa realizzerà e quando sarà online.

Cosa dovrebbero poter fare gli acquirenti con il modello?

Chi acquista prodotti industriali vuole vedere dentro e controllare i numeri, quindi il modello deve permettere di smontare il prodotto, sezionarlo, guardarci dentro e leggere i dati di ogni componente, non solo di ruotarlo. Ognuna di queste funzioni è attiva in un modello online che puoi aprire subito:

• Vista esplosa. La valvola a sfera HALVORN BV25 si scompone nei suoi 14 componenti seguendo l'ordine di montaggio.
• Sezione e flusso. Taglia a metà la pompa STRAVIK SX 50-160 e falla funzionare a qualsiasi portata da 15 a 40 m³/h.
• Raggi X. Guarda il motore, il riduttore armonico 50:1 e il cuscinetto di uscita attraverso l'alloggiamento del giunto robotico ARTIXO RA90.
• Dati dei componenti e misure. Clicca su qualsiasi componente del collettore ICM-21 di Tutamen per vederne nome, materiale e quantità, misura tra spigoli reali e fai scorrere il liquido di raffreddamento con la ripartizione indicata nella scheda tecnica.
• Condivisione. Un link e un codice QR per ogni vista, e un breve tour guidato per i visitatori che non esplorano da soli.

Dallo stesso modello si possono generare film di lancio: guarda l'animazione 3D di prodotto oppure il film di 35 secondi che mostra un prodotto smontato nel browser in una pagina prodotto 3D interattiva.

Come mantenere veloce un modello 3D sugli smartphone?

Mantieni il modello entro pochi megabyte, caricalo quando il visitatore ci arriva e assicurati che la pagina si legga bene anche senza. Un modello che si carica per primo ritarda la visualizzazione dei testi e delle immagini che gli acquirenti cercano.

• Comprimi il file. Il glTF può memorizzare i numeri in meno byte e comprimere la geometria con le estensioni Draco o meshopt, e il server dovrebbe inviarlo compresso. I modelli di Proofscene salvano le direzioni delle superfici in numeri a 16 bit e viaggiano compressi con gzip: il GLB da 3,6 MB del collettore ICM-21 arriva al browser compresso a 2,0 MB.
• Concentra i triangoli dove guardano gli acquirenti. I dettagli delle filettature, i raccordi minuscoli e l'interno dei componenti che nessuno apre fanno perdere tempo allo smartphone e non aggiungono nulla.
• Mostra prima un'immagine fissa. Carica il 3D quando appare sullo schermo scorrendo la pagina, oppure con un tocco; model-viewer lo fa con un'immagine di anteprima (poster) e il caricamento differito (lazy loading).
• Non bloccare lo scorrimento. I visualizzatori incorporati di Proofscene scorrono con la pagina e fanno lo zoom solo con Ctrl o con un gesto a pizzico. Sugli smartphone i pannelli si trasformano in schede a comparsa, così il prodotto resta visibile.
• Metti i dati nel testo. Motori di ricerca e assistenti AI leggono la pagina, non il modello, quindi inserisci descrizione, nomi dei componenti e specifiche nell'HTML. Le pagine demo pubbliche di Proofscene aggiungono i dati strutturati del modello 3D, e un browser che non riesce a eseguire il 3D riceve comunque quel testo.

Il tuo CAD è al sicuro quando il modello è su una pagina pubblica?

Sì, perché un modello di visualizzazione non è il tuo CAD: contiene triangoli con la precisione che serve allo schermo, senza albero delle feature, schizzi, parametri o superfici esatte, e senza nessuno dei dettagli interni che hai escluso. Prima di pubblicare, proteggi ciò che conta:

• Semplifica o elimina tutto ciò che è commercialmente sensibile, come un canale interno o il profilo di una guarnizione.
• Non caricare mai il file STEP su un visualizzatore da cui i visitatori possono scaricare l'originale.
• Fai la revisione su un link protetto da password prima del lancio e firma un NDA con chiunque gestisca il CAD. Proofscene lavora così, e il tuo CAD e i tuoi contenuti restano di tua proprietà.

Da leggere anche

Leggi come l'ICM-21 di Tutamen è passato dal file STEP a una pagina prodotto online, prova tutti e quattro i modelli nella pagina della demo 3D interattiva del prodotto oppure guarda il film di 36 secondi in cui un visualizzatore 3D del prodotto arriva sul tuo sito web.