A febbraio abbiamo introdotto il componente web <model-viewer>, che consente di aggiungere dichiarativamente un modello 3D a una pagina web, ospitando il modello sul proprio sito. Una cosa che non supportava era la realtà aumentata. Questo significa che non puoi visualizzare l'immagine sorgente del componente sopra il feed della videocamera di un dispositivo.
A questo scopo, abbiamo aggiunto il supporto per Magic Leap e Quick Look su iOS. Annunciamo il supporto dell'AR su Android con l'aggiunta dell'attributo ar. Questo attributo è basato su una nuova funzionalità ARCore chiamata Scene Viewer,
un'app esterna per la visualizzazione di modelli 3D. Per scoprire di più su Scene Viewer, consulta l'articolo Visualizzare modelli 3D in AR da un browser Android.
Vediamo come usare la realtà aumentata con <model-viewer>.
L'attributo
Come ricorderai, un componente web non richiede alcuna conoscenza particolare per essere utilizzato. Si comporta come un elemento HTML standard, con un tag univoco, nonché proprietà e metodi. Dopo l'installazione con un tag <script>, utilizzalo come qualsiasi altro elemento HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
È molto simile a quello che avevo nel mio articolo precedente. Notate la cosa che ho evidenziato alla fine. Questo è il nuovo attributo.
Installazione della nuova versione in corso...
Se utilizzi già <model-viewer>, è probabile che tu stia importando il componente utilizzando i tag <script> esattamente come mostrato nella documentazione.
Apportiamo continuamente miglioramenti. Se vuoi testare nuove funzionalità prima
di eseguire deliberatamente l'upgrade e il deployment, ti consigliamo di installare una versione specifica
di <model-viewer>. Per farlo, aggiungi il numero di versione agli URL dei file come mostrato di seguito. Quindi, guarda
la pagina delle release
per gli aggiornamenti.
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
Conclusione
Prova la nuova versione di <model-viewer> e facci sapere cosa ne pensi.
Per problemi e feedback, non esitare a chiedere su GitHub.