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