A febbraio abbiamo introdotto il componente web <model-viewer>,
che consente di aggiungere in modo dichiarativo un modello 3D a una pagina web, ospitando al contempo
modello sul tuo sito. Una soluzione che non supportava era la realtà aumentata. Questo
è che non hai potuto eseguire il rendering dell'immagine di origine del componente sopra la
feed videocamera.
Per farlo, abbiamo aggiunto il supporto per Magic Leap e Quick Look su iOS. Adesso
annunciamo il supporto dell'AR su Android con l'aggiunta dell'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,
dai un'occhiata a 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 alcuna conoscenza particolare per l'utilizzo. it
si comporta come un elemento HTML standard, con un tag univoco e proprietà
e metodi. Dopo il giorno
l'installazione con un tag <script>,
come qualsiasi altro elemento HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
È più o meno uguale a quello indicato nel mio articolo precedente. Nota la cosa che ho evidenziato alla fine. Questo è il nuovo attributo.
Installazione della nuova versione
Se utilizzi già <model-viewer>, probabilmente stai importando il componente
usando i tag <script> esattamente
come mostrato nella documentazione.
Apportiamo continui miglioramenti. Se vuoi testare le nuove funzionalità prima
ed eseguire deliberatamente l'upgrade e il deployment, dovrai installare una versione
di <model-viewer>. Per farlo, aggiungi il numero di versione agli URL del file come mostrato
di seguito. Quindi, guarda
la pagina delle release
per 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
benvenuto su GitHub.