Realidad aumentada con <model-viewer>

El componente web <model-viewer> se puede utilizar para ver modelos 3D e interactuar con ellos en la Web. Además, realiza una transición fluida para ubicar esos modelos e interactuar con ellos en realidad aumentada en la Web.

Cuando se ve en un dispositivo Android compatible con ARCore, un componente <model-viewer> con el atributo ar muestra un botón, como se indica en el siguiente ejemplo:

Captura de pantalla del visor de modelos

Si presionas este botón en los dispositivos compatibles con ARCore, se mostrará el modelo con la funcionalidad WebXR de Chrome o la app de Scene Viewer, según el valor del atributo ar-modes.

El aspecto del botón de RA se puede personalizar mediante ranuras de componentes web. Consulta <model-viewer> documentation para ver un ejemplo. Consulta también Scene Viewer para obtener más información sobre cómo mostrar modelos 3D interactivos en RA desde un navegador o una app para Android.

Introducción a <model-viewer>

Los siguientes pasos muestran cómo comenzar a usar <model-viewer> en cualquier página web.

Cómo agregar la dependencia <model-viewer>

De la CDN que no se empaquetó

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

De npm

npm install @google/model-viewer

Luego, agrega <model-viewer> en node_modules/model-viewer/dist/model-viewer.min.js con tu agrupador preferido,

Incluye la etiqueta <model-viewer>

Agrega el componente web <model-viewer> a tu 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 la etiqueta <model-viewer>

La visualización del modelo se puede configurar cambiando los atributos de la etiqueta <model-viewer>. Estas propiedades exponen opciones como el movimiento de la cámara, las animaciones del modelo y la información del entorno. En la documentación de <model-viewer>, se enumeran todos los atributos que se pueden configurar. La utilidad Editor de modelos puede generar una etiqueta HTML <model-viewer> y configurar propiedades como la posición y la iluminación de la cámara.

Captura de pantalla del editor de modelos

Compatibilidad de modelos

<model-viewer> admite los modelos en formato de archivo gltf y glb. Consulta three.js GLTFLoader documentation para obtener una lista de las extensiones de glTF compatibles.

Para asegurarte de que tu modelo se muestre correctamente, revísalo en el Editor de modelos.

Compatibilidad con navegadores y dispositivos

El uso de <model-viewer> para mostrar modelos 3D en una página web es compatible con todos los navegadores perdurables. Te recomendamos que uses un polyfill :focus-visible para ocultar los anillos de enfoque cuando el elemento esté enfocado.

Las funciones de RA requieren un dispositivo compatible con ARCore y la instalación de los Servicios de Google Play para RA. Para conocer el modo de RA de webxr, consulta Compatibilidad con navegadores WebXR. De forma predeterminada, si WebXR no es compatible, se usará Scene Viewer en su lugar.

Próximos pasos