Aggiungere modelli 3D a un sito web può essere complicato; <model-viewer> è facile come scrivere codice HTML.
Aggiungere modelli 3D a un sito web è difficile. I modelli 3D vengono mostrati idealmente in un visualizzatore che può funzionare in modo adattabile su tutti i browser, inclusi smartphone, computer o persino nuovi visori. Il visualizzatore deve supportare il potenziamento progressivo per le prestazioni e la qualità di rendering. Dovrebbe supportare casi d'uso su tutti i dispositivi, dagli smartphone più vecchi e meno potenti ai dispositivi più recenti che supportano la realtà aumentata. Deve rimanere aggiornato con le tecnologie attuali. Dovrebbe essere efficiente e accessibile. Tuttavia, la creazione di un visualizzatore di questo tipo richiede competenze di programmazione 3D specializzate e può essere una sfida per gli sviluppatori web che vogliono ospitare i propri modelli anziché utilizzare un servizio di hosting di terze parti.
Il componente web <model-viewer>, invece, ti consente di aggiungere in modo dichiarativo un modello 3D a una pagina web, ospitando il modello sul tuo sito.
L'obiettivo del componente è consentire l'aggiunta di modelli 3D al tuo sito web senza comprendere la tecnologia e le piattaforme sottostanti.
Il componente web supporta il responsive design e casi d'uso come la realtà aumentata su alcuni dispositivi.
Include funzionalità per l'accessibilità, la qualità di rendering e l'interattività.
Che cos'è un componente web?
Un componente web è un elemento HTML personalizzato creato a partire da funzionalità standard della piattaforma web. Un componente web si comporta a tutti gli effetti come un elemento standard. Ha un tag univoco, può avere proprietà e metodi e può attivare e rispondere agli eventi. In breve, non è necessario avere conoscenze particolari per utilizzare un 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>?
I seguenti esempi 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 tutti i principali browser.
<!-- 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 in questo modo:
Aggiungi movimento e interattività
Gli attributi auto-rotate e camera-controls forniscono il controllo del movimento e 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>
Ritarda il caricamento con le immagini poster
Tutti i modelli 3D richiedono tempo per essere caricati. L'aggiunta di un attributo poster consente di mostrare un'immagine finché il modello non è pronto per l'uso.
Un'immagine poster identica al rendering 3D può essere generata utilizzando l'editor.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
Responsive design
Il componente gestisce alcuni tipi di responsive design, con scalabilità sia per dispositivi mobili che per computer. Può anche gestire più istanze su una pagina e utilizza Intersection Observer per risparmiare batteria e cicli della GPU quando un modello non è visibile.
L'utilizzo dell'editor descritto in precedenza per creare un'immagine poster consente a questa singola immagine di corrispondere 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 demo di funzionalità più avanzate.
Queste includono la possibilità di aggiungere uno skybox proiettato sul terreno e di creare texture animate e hotspot.