Aggiungere modelli 3D a un sito web può essere complicato; <model-viewer> è facile come scrivere codice HTML.
Aggiungere modelli 3D a un sito web è complicato. I modelli 3D vengono idealmente mostrati in un visualizzatore che può funzionare in modo reattivo su tutti i browser, inclusi smartphone e computer, o persino display con head-screen nuovi. Lo spettatore dovrebbe supportare il miglioramento progressivo delle prestazioni e della qualità di rendering. Dovrebbe supportare i casi d'uso su tutti i dispositivi, dagli smartphone meno recenti con prestazioni inferiori ai dispositivi più recenti che supportano la realtà aumentata. Deve rimanere al passo con le tecnologie attuali. Deve essere efficiente e accessibile. Tuttavia, la creazione di uno spettatore di questo tipo richiede competenze di programmazione 3D speciali 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.
Il componente web <model-viewer>, tuttavia, 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 sito web senza conoscere la tecnologia e le piattaforme sottostanti.
Il componente web supporta il reattivo design
e casi d'uso come la realtà aumentata.
Include funzionalità di accessibilità, qualità di rendering e 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 per tutti gli intent e gli scopi come un elemento standard. Ha un tag univoco, può avere proprietà e metodi e può attivarsi e rispondere agli eventi. In breve, non devi sapere niente di speciale per usare componenti web, tanto meno <model-viewer>.
Questo articolo riguarda 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 dimostrano 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 funziona 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 sarà visualizzato così:
Aggiungi movimento e interattività
Gli attributi auto-rotate e camera-controls consentono 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>
Ritardo nel caricamento con le immagini poster
Il caricamento di tutti i modelli 3D richiede del tempo, pertanto l'aggiunta di un attributo poster significa che l'immagine verrà mostrata finché il modello non sarà pronto per l'uso.
Con l'editor puoi generare un'immagine poster identica al rendering 3D.
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
Responsive design
Il componente gestisce alcuni tipi di design reattivo, con scalabilità sia per dispositivi mobili che per computer. Può anche gestire più istanze su una pagina e utilizzare lo strumento Intersection Observationr per risparmiare batteria e cicli di GPU quando un modello non è visibile.
L'utilizzo dell'editor descritto in precedenza per creare un'immagine poster consente a quella
singola immagine di corrispondere al rendering 3D, anche se le proporzioni di <model-viewer>
rispondono a dimensioni dello schermo diverse.
Altre funzionalità
Esplora la documentazione di <model-viewer>
per le demo delle funzionalità più avanzate.
tra cui la possibilità di aggiungere uno
skybox con proiezione del suolo,
e di creare
trame animate
e hotspot.