Realtà aumentata con <model-viewer>

Il componente web <model-viewer> può essere utilizzato per visualizzare e interagire con modelli 3D sul web; inoltre, passa senza problemi al posizionamento e all'interazione con i modelli 3D nella realtà aumentata sul web.

Quando viene visualizzato su un dispositivo Android supportato da ARCore, un componente <model-viewer> con l'attributo ar mostra un pulsante, come mostrato nell'esempio seguente:

Screenshot del visualizzatore modello

Se tocchi questo pulsante sui dispositivi che supportano ARCore, il modello viene visualizzato utilizzando la funzionalità WebXR di Chrome o l'app Scene Viewer, a seconda del valore dell'attributo ar-modes.

L'aspetto del pulsante AR può essere personalizzato utilizzando gli spazi dei componenti web. Per un esempio, consulta la <model-viewer> documentation. Per ulteriori informazioni sulla visualizzazione di modelli 3D interattivi in AR da un'app o un browser per Android, vedi anche Scene Viewer.

Introduzione a <model-viewer>

I passaggi seguenti mostrano come iniziare a utilizzare <model-viewer> su qualsiasi pagina web.

Aggiungi la dipendenza <model-viewer>

Da CDN non pacchettizzata

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Da npm

npm install @google/model-viewer

Dopodiché aggiungi <model-viewer> all'indirizzo node_modules/model-viewer/dist/model-viewer.min.js usando il tuo bundler preferito,

Includi il tag <model-viewer>

Aggiungi il componente web <model-viewer> al documento HTML:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

Configura il tag <model-viewer>

La visualizzazione del modello può essere configurata modificando gli attributi nel tag <model-viewer>. Queste proprietà espongono opzioni come il movimento della videocamera, le animazioni dei modelli e le informazioni sull'ambiente. La documentazione di <model-viewer> elenca tutti gli attributi che possono essere impostati. L'utilità Editor modelli può generare un tag HTML <model-viewer> e configurare proprietà come la posizione della fotocamera e l'illuminazione.

Screenshot dell&#39;editor del modello

Compatibilità del modello

I modelli nei formati file gltf e glb sono supportati da <model-viewer>. Consulta la three.js GLTFLoader documentation per un elenco delle estensioni glTF supportate.

Per assicurarti che il modello venga visualizzato correttamente, controllalo nell'editor modelli.

Supporto di browser e dispositivi

L'utilizzo di <model-viewer> per visualizzare modelli 3D in una pagina web è supportato in tutti i browser evergreen. Ti consigliamo di utilizzare un polyfill :focus-visible per nascondere gli anelli di messa a fuoco quando l'elemento è attivo.

Le funzionalità AR richiedono un dispositivo supportato da ARCore e l'installazione di Google Play Services per AR. Per la modalità AR webxr, consulta Supporto del browser WebXR. Per impostazione predefinita, se WebXR non è supportato, verrà utilizzato Scene Viewer.

Passaggi successivi