A febbraio abbiamo introdotto il componente web <model-viewer>, che consente di aggiungere in modo dichiarativo un modello 3D a una pagina web, ospitandolo sul tuo sito. Una cosa che non supportava era la realtà aumentata. Ciò significa che non puoi eseguire il rendering dell'immagine di origine del componente sopra il feed della videocamera di un dispositivo.
Per farlo, abbiamo aggiunto il supporto per Magic Leap e Quick Look su iOS. Ora annunciiamo il supporto dell'AR su Android con l'aggiunta dell'attributo ar. Questo attributo si basa 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 Visualizzare modelli 3D in AR da un browser Android.
Vediamo come utilizzare la realtà aumentata con <model-viewer>.
L'attributo
Come forse ricorderai, un componente web non richiede conoscenze particolari per essere utilizzato. Si comporta come un elemento HTML standard, con un tag univoco, 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>
Sembra molto simile a quello che avevo nel mio articolo precedente. Nota l'elemento evidenziato alla fine. Questo è il nuovo attributo.
Installazione della nuova versione
Se utilizzi già <model-viewer>, probabilmente stai importando il componente
utilizzando i tag <script> esattamente
come mostrato nella documentazione.
Stiamo apportando continuamente miglioramenti. Se vuoi testare le nuove funzionalità prima di eseguire l'upgrade e il deployment deliberatamente, devi installare una versione specifica di <model-viewer>. A tale scopo, aggiungi il numero di versione agli URL dei file come mostrato di seguito. Quindi, controlla
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.
Problemi e feedback sono benvenuti su GitHub.