State pensando di aggiungere un visualizzatore di modelli anatomici 3D al vostro sito web, alla vostra app o al vostro LMS? Allora vi starete chiedendo quanto sia difficile il processo di integrazione.

Molti team ritengono che l'incorporazione di contenuti 3D interattivi richieda tempi lunghi e la ricostruzione delle pagine esistenti. In realtà, un visualizzatore 3D professionale può essere distribuito attraverso una semplice integrazione iframe con uno sforzo tecnico minimo.

In questa guida, discutiamo come funziona un visualizzatore 3D, cosa è incluso e perché gli utenti lo apprezzano.

Che cos'è un visualizzatore 3D incorporabile?

Un visualizzatore 3D incorporabile è un'applicazione 3D interattiva che può essere inserita direttamente nel sito web o nell'applicazione tramite un iframe.

Permette agli utenti di esplorare i modelli 3D all'interno della vostra piattaforma esistente. Ciò significa che non è necessario reindirizzare gli utenti a un altro sito web o a un'altra applicazione.

A differenza delle immagini o dei video, i moduli iframe offrono una panoramica a 360 gradi, completamente guidata dall'utente, di una struttura o di un processo, consentendo all'utente di approfondire il contenuto al ritmo che preferisce.

Mark K., responsabile dello sviluppo commerciale di VOKA

Per le piattaforme mediche ed educative, questo è un modo semplice per aggiungere contenuti interattivi di anatomia e patologia senza uno sviluppo complesso. Di conseguenza, gli utenti possono interagire con il modello in tempo reale: ruotarlo, ingrandirlo e ispezionare le strutture direttamente sulla pagina.

Come funziona l'iframe di VOKA

La nostra soluzione iframe semplifica la distribuzione di contenuti medici 3D avanzati, offrendo ai clienti il pieno controllo sull'hosting e sulle prestazioni.

A differenza di molte soluzioni concorrenti che si basano su un accesso continuo alle API o su uno streaming esterno, VOKA fornisce un pacchetto completo e autonomo in cui il cliente riceve tutti i file necessari e li ospita sulla propria infrastruttura.

In pratica, l'iframe agisce come una semplice finestra di visualizzazione sul vostro sito web, mentre il visualizzatore 3D interattivo funziona da file memorizzati sul vostro server.

Perché è efficiente? Perché non c'è vendor lock-in o dipendenza da servizi esterni dopo la consegna.

Ecco come si presenta il processo di integrazione con VOKA.

Fase 1. Costruiamo la scena 3D interattiva

Prima che un visualizzatore 3D possa essere operativo, è necessario il contenuto 3D stesso.

Le opzioni sono due: si può scegliere un singolo modello o un pacchetto tematico di più modelli.

Suggeriamo di sfogliare l'ampia libreria di modelli 3D già pronti di VOKA o, se necessario, di consultare il sito web di VOKA, richiesta di una risorsa personalizzata su misura per le vostre esigenze.

Una volta selezionato il contenuto 3D, prepariamo una scena (ad esempio, un modello del cuore umano o uno strumento chirurgico) con Unity per un uso agevole sul web.

Il visualizzatore è dotato di strumenti integrati che consentono agli utenti di interagire immediatamente con il modello, tra cui:

  • Controlli interattivi: rotazione a 360°, zoom, isolare o nascondere le strutture.

  • Strumenti penna 2D e 3D per disegnare direttamente sul modello

  • Dissezione per visualizzare l'anatomia interna e la patologia

  • Evidenziazione del colore per attirare l'attenzione sulle parti selezionate

Se si desidera che il visualizzatore si adatti allo stile della propria piattaforma, è possibile effettuare ulteriori personalizzazioni:

  • Sfondi personalizzati

  • Colori e caratteri del marchio

  • Modalità chiara o scura

In questo modo è possibile mantenere l'identità del marchio su tutte le piattaforme.

Passo 2. Esportiamo il pacchetto come pacchetto WebGL

Una volta pronta, la scena viene esportata come build WebGL.

WebGL è una tecnologia per browser che consente l'esecuzione di grafica 3D ad alte prestazioni direttamente nei browser moderni, senza richiedere l'installazione di software o plugin.

Il pacchetto finale di solito comprende:

  • Modelli 3D ottimizzati

  • Materiali e texture

  • File di configurazione JSON

  • File di build pronti per il browser

  • Pagina di lancio in HTML

Tutti i file sono preparati per un caricamento fluido e una compatibilità multipiattaforma.

Fase 3. Ospitate i file sul vostro server

Poi inviamo il pacchetto completo al vostro team.

A seconda della piattaforma, la consegna può includere file pronti per il web, il desktop o il mobile.

  • Web: funziona in Chrome, Safari, Firefox ed Edge

  • Desktop: Windows (.exe, .dll) e macOS (.app, .dylib, progetto Xcode)

  • Mobile:iOS (progetto Xcode) e Android (.apk, .aab, progetto Android Studio con librerie .so)

I vostri sviluppatori ricevono e caricano i file sul vostro ambiente di hosting, sul cloud storage o sull'infrastruttura interna. In questo modo avrete la piena responsabilità della distribuzione, dei tempi di attività e della gestione degli accessi.

A differenza di molte piattaforme di visualizzazione di terze parti, i vostri contenuti non dipendono da un server di un fornitore esterno.

Passo 4. Si aggiunge un iframe alla pagina

Dopo aver ospitato i file, è possibile incorporare il visualizzatore in qualsiasi sito web, app, LMS o portale utilizzando un iframe standard.

Lo snippet HTML punta alla pagina del visualizzatore ospitato, permettendogli di apparire all'interno della vostra piattaforma.

Un esempio di base è il seguente:

Uno snippet di codice che mostra un elemento iframe HTML con gli attributi: src impostato su un URL segnaposto, larghezza a 100%, altezza a 700, bordo impostato a 0 e incluse le proprietà allowfullscreen e lazy loading.

Se necessario, il team VOKA può fornire una guida passo passo affinché tutto funzioni correttamente.

Fase 5. Gli utenti interagiscono direttamente sulla vostra piattaforma

Una volta incorporati, gli utenti possono accedere all'esperienza interattiva in 3D senza lasciare la vostra piattaforma.

Non è necessario scaricare software, aprire un'applicazione separata o cambiare scheda. Il visualizzatore 3D appare come parte integrante dell'ambiente digitale.

Siete pronti a lanciare un visualizzatore 3D sulla vostra piattaforma?

Parliamone

Quanto è difficile l'integrazione di iframe?

È molto più semplice di quanto le aziende si aspettino.

Il visualizzatore 3D funziona come un modulo autonomo che può essere inserito direttamente nella vostra piattaforma. La struttura del vostro sito web o della vostra app rimane intatta, mentre il contenuto 3D viene aggiunto come nuova sezione.

Cosa serve

Per iniziare, i team hanno bisogno solo di alcuni elementi di base:

  • Un punto della pagina in cui apparirà il visualizzatore

  • Il codice di incorporamento iframe fornito da VOKA

  • Dimensioni preferite del visore (larghezza e altezza)

  • Stile di base della pagina per adattarla al vostro layout e al design reattivo

Per molti siti web, questo può essere gestito come parte di un normale aggiornamento dei contenuti.

Cosa non serve

Un'idea sbagliata comune è che l'aggiunta di funzionalità 3D richieda un grande progetto tecnico. In pratica, la maggior parte delle integrazioni iframe non richiede:

  • Costruire un visualizzatore 3D personalizzato da zero

  • Sviluppo di un motore di rendering o di un sistema grafico

  • Ricostruzione della struttura del sito web

  • Avvio di un progetto di sviluppo backend pesante

  • Creare applicazioni specifiche per dispositivi mobili o desktop

Poiché il visualizzatore è già costruito e ottimizzato, il vostro team salta le parti più lunghe dello sviluppo personalizzato.

Invece di creare la tecnologia, è sufficiente inserire una soluzione esistente nella vostra piattaforma.

Perché considerare l'integrazione di iframe

L'integrazione Iframe elimina molti ostacoli comuni che rallentano i progetti. Ecco alcuni dei motivi principali per cui i team scelgono questo approccio.

L'opzione di lancio più veloce

L'integrazione di un visualizzatore 3D tramite iframe accorcia le tempistiche e aiuta i team a muoversi più rapidamente.

Non è necessario costruire un frontend personalizzato o creare un nuovo flusso di prodotti da zero. Una volta che i file sono ospitati, il visualizzatore può essere aggiunto con un semplice codice embed.

Quindi, se la velocità è importante, l'iframe è il primo passo migliore.

Minimo sforzo di sviluppo

La maggior parte del lavoro tecnico viene svolto già prima della consegna.

Il vostro team non deve creare un motore 3D, costruire controlli per il visualizzatore o risolvere problemi di rendering.

L'implementazione richiede solo il posizionamento del visualizzatore su una pagina e la regolazione delle impostazioni di layout. Questo riduce la pressione sugli sviluppatori interni.

Integrazione con la piattaforma esistente

Una mano che tiene in mano un telefono cellulare che visualizza un articolo didattico con un visualizzatore 3D interattivo che mostra un modello di cellula dettagliato con controlli per colori, parti e strumenti.

Iframe è progettato per integrarsi nei sistemi già in uso. Può essere aggiunto a siti web, app, piattaforme di apprendimento, portali interni e pagine di prodotto.

Non è necessario ricostruire la piattaforma attuale per fare spazio ai contenuti 3D. Il visualizzatore appare come parte della pagina, pur rimanendo tecnicamente separato sullo sfondo.

Scalabile in seguito

Iniziare con un iframe non limita le opzioni future.

Molte aziende iniziano con un semplice visualizzatore incorporato e lo ampliano successivamente in base al feedback degli utenti e agli obiettivi aziendali. È possibile aggiungere altri modelli e creare nuove pagine nel corso del tempo.

Questo vi permette di iniziare in piccolo e di scalare quando siete pronti. È un percorso flessibile.

Ideale prima di un'integrazione personalizzata più profonda

Non tutte le aziende hanno bisogno di una soluzione completamente personalizzata fin dal primo giorno.

L'integrazione dell'iframe vi offre un modo rapido per effettuare il primo lancio, imparare come gli utenti interagiscono con i contenuti e capire quali sono le caratteristiche più importanti. Riduce i rischi prima di investire in un lavoro tecnico più approfondito.

Come i diversi team utilizzano i visori 3D

I contenuti interattivi in 3D possono essere utili in molti campi in cui è necessario spiegare in modo chiaro informazioni complesse. Ecco alcuni dei modi più comuni in cui gli sviluppatori del settore medicale utilizzano il nostro visualizzatore 3D incorporabile.

Piattaforme didattiche (LMS)

Le università, i centri di formazione e le piattaforme di e-learning incorporano il nostro visualizzatore di anatomia 3D per rendere le lezioni più visive e coinvolgenti.

Gli studenti possono ruotare i modelli, esplorare l'anatomia strato per strato e imparare al proprio ritmo. Rispetto ai diagrammi statici o ai libri di testo, questo formato migliora apprendimento dell'anatomia.

Cliniche e fornitori di servizi sanitari

Le cliniche aggiungono il nostro visualizzatore 3D ai siti web o ai portali dei pazienti per spiegare meglio diagnosi e trattamenti.

Spesso le persone capiscono le spiegazioni visive più velocemente delle sole descrizioni scritte. Questo può migliorare comunicazione con il paziente e costruire la fiducia prima della consultazione o del trattamento.

Marketing e comunicazione

I contenuti interattivi in 3D aiutano i team di marketing a creare landing page e presentazioni di prodotto più efficaci.

Invece di utilizzare semplici immagini, le aziende possono mostrare dispositivi, anatomie o patologie in tre dimensioni. Gli elementi interattivi incoraggiano i visitatori a trascorrere più tempo sulle pagine, migliorando le prestazioni e la fidelizzazione delle campagne.

Inoltre, i team possono incorporare il visualizzatore 3D in piattaforme e materiali di presentazione per eventi promozionali per attirare l'attenzione e dimostrare i prodotti senza prototipi fisici.

Blogger ed editori medici

I creatori di contenuti possono utilizzare il nostro visualizzatore 3D per rendere gli articoli più informativi e memorabili.

I lettori possono esplorare l'argomento in 3D all'interno della pagina. Questo funziona particolarmente bene per le spiegazioni di anatomia, l'educazione sanitaria e i contenuti di notizie mediche.

E siamo onesti, non tutti gli articoli hanno un iframe incorporato, quindi è anche una grande opportunità per distinguersi online.

Conclusione

Incorporare un visualizzatore di modelli 3D non è più un progetto tecnico complesso. Con un iframe, è possibile aggiungere contenuti medici interattivi senza dover ricostruire la piattaforma esistente.

È un modo pratico per rendere più comprensibili informazioni complesse, migliorare il coinvolgimento degli utenti e migliorare l'esperienza complessiva del vostro prodotto digitale.

Se state pianificando il vostro prossimo passo, la domanda chiave non è “se” usare il 3D, ma quanto velocemente volete introdurlo nella vostra piattaforma. Siete pronti ad andare avanti? Contatta il team VOKA, e vi aiuteremo a iniziare subito!

FAQ

1. Come incorporare un visualizzatore di modelli 3D in un sito web?

Di solito si incorpora un visualizzatore di modelli 3D utilizzando un semplice codice iframe. Una volta che il visualizzatore è ospitato, è sufficiente incollare l'iframe nella pagina in cui si desidera visualizzare il modello 3D. Non è necessario ricostruire il sito web.

2. È possibile utilizzare un visualizzatore di modelli 3D in qualsiasi browser?

Sì, il nostro visualizzatore 3D è basato su WebGL e funziona su tutti i principali browser come Chrome, Safari, Firefox ed Edge. Funziona anche sui dispositivi mobili, purché il browser sia aggiornato.

3. È necessario avere competenze di codifica per incorporare un visualizzatore di modelli 3D?

L'HTML di base è di solito sufficiente. Nella maggior parte dei casi, è sufficiente copiare e incollare uno snippet iframe nel proprio sito web o CMS. Non è necessario alcuno sviluppo avanzato.

4. Fornite un supporto continuo per il visualizzatore 3D?

Forniamo al cliente il pacchetto completo del visualizzatore, il che significa che non c'è alcun abbonamento o vendor lock-in. Una volta consegnati e implementati i file, la soluzione viene gestita in modo indipendente dal cliente. Allo stesso tempo, supportiamo la configurazione iniziale fornendo istruzioni chiare per l'installazione e l'integrazione.

5. Posso aggiungere un visualizzatore 3D a WordPress o Squarespace?

Sì. Se la vostra piattaforma consente blocchi HTML o embed personalizzati, il visualizzatore può essere aggiunto con un codice iframe standard. I costruttori di siti web più diffusi, come WordPress e Squarespace, supportano comunemente questa impostazione.