Il componente web <model-viewer>

Aggiungere modelli 3D a un sito web può essere complicato; <model-viewer> è facile come scrivere HTML.

Joe Medley
Joe Medley

L'aggiunta di modelli 3D a un sito web è complessa. È preferibile mostrare i modelli 3D in un visualizzatore che possa funzionare in modo adattabile su tutti i browser, inclusi smartphone, computer e persino nuovi display montati sulla testa. Lo spettatore dovrebbe supportare il miglioramento progressivo per le prestazioni e la qualità del rendering. Deve supportare scenari di utilizzo su tutti i dispositivi, dagli smartphone meno recenti e meno potenti ai dispositivi più recenti che supportano la realtà aumentata. Deve essere aggiornato con le tecnologie attuali. Deve essere performante e accessibile. Tuttavia, la creazione di un visualizzatore di questo tipo richiede competenze specialistiche di programmazione 3D e può rappresentare una sfida per gli sviluppatori web che vogliono ospitare i propri modelli invece di utilizzare un servizio di hosting di terze parti.

Tuttavia, il componente web <model-viewer> consente di aggiungere in modo dichiarativo un modello 3D a una pagina web, ospitandolo sul tuo sito. L'obiettivo del componente è consentire l'aggiunta di modelli 3D al tuo sito web senza conoscere la tecnologia e le piattaforme di base. Il componente web supporta il responsive design e casi d'uso come la realtà aumentata su alcuni dispositivi. Include funzionalità per accessibilità, qualità del rendering e interattività.

Che cos'è un componente web?

Un componente web è un elemento HTML personalizzato creato a partire dalle funzionalità standard della piattaforma web. Un componente web si comporta per tutti gli intent e gli scopi come un elemento standard. Ha un tag univoco, può avere proprietà e metodi e può attivare e rispondere agli eventi. In breve, non è necessario conoscere nulla di speciale per utilizzare qualsiasi componente web, tanto meno <model-viewer>.

Questo articolo illustra le funzionalità specifiche di <model-viewer>. Se vuoi saperne di più sui componenti web, webcomponents.org è un buon punto di partenza.

Che cosa può fare l'app <model-viewer>?

Gli esempi riportati di seguito mostrano alcune funzionalità di <model-viewer>.

Modelli 3D di base

L'incorporamento di un modello 3D è semplice come il seguente markup. Utilizzando i file glb, questo componente funzionerà su qualsiasi browser principale.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
 
id="mv-shark"
   
src="shark.glb"
 
camera-controls
></model-viewer>

Il codice viene visualizzato nel seguente modo:

Aggiungi movimento e interattività

Gli attributi auto-rotate e camera-controls forniscono il movimento e il controllo dell'utente. Questi non sono gli unici attributi possibili. Consulta la documentazione per un elenco completo degli attributi.

<model-viewer src="shark.glb" auto-rotate camera-controls>

Posticipa il caricamento con le immagini poster

Il caricamento di tutti i modelli 3D richiede tempo, quindi l'aggiunta di un attributo poster significa che un'immagine verrà mostrata finché il modello non sarà pronto per l'uso. Utilizzando l'editor, è possibile generare un'immagine poster identico al rendering 3D.

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

Responsive design

Il componente gestisce alcuni tipi di responsive design, adattandosi sia ai dispositivi mobili sia ai computer. Può anche gestire più istanze in una pagina e utilizza Intersection Observer per risparmiare batteria e cicli GPU quando un modello non è visibile.

L'utilizzo dell'editor descritto in precedenza per creare un'immagine poster consente di abbinare la singola immagine al rendering 3D, anche se le proporzioni di <model-viewer> rispondono a dimensioni dello schermo diverse.

Più immagini di tute spaziali che rappresentano la reattività.
Varie immagini di tute spaziali che rappresentano la reattività.

Altre funzionalità

Consulta la documentazione di <model-viewer> per visualizzare demo di funzionalità più avanzate. Sono incluse la possibilità di aggiungere un skybox proiettato sul suolo, e creare texture animate, e hotspot.