Realidad aumentada con visor de modelos

En febrero, presentamos el componente web <model-viewer>, que te permite agregar de forma declarativa un modelo 3D a una página web mientras alojas el modelo en tu propio sitio. Algo que no admitía fue la realidad aumentada. Es decir, no podrías renderizar la imagen de origen del componente sobre el feed de cámara de un dispositivo.

Para ello, agregamos compatibilidad con Magic Leap y Quick Look en iOS. Ahora anunciamos la compatibilidad con la RA en Android con el atributo ar agregado. Este atributo se basa en una nueva función de ARCore llamada Scene Viewer, una app externa para ver modelos 3D. Para obtener más información sobre Scene Viewer, consulta Cómo ver modelos 3D en RA desde un navegador de Android.

Rover de Marte

Veamos cómo hacer realidad aumentada con <model-viewer>.

El atributo

Como recordarás, un componente web no requiere conocimientos especiales para su uso. Se comporta como un elemento HTML estándar, tiene una etiqueta única, además de sus propiedades y métodos. Después de instalarlo con una etiqueta <script>, úsalo como cualquier otro elemento HTML.

<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>

Esto se ve muy similar a lo que tenía en mi artículo anterior. Fíjate en lo que he resaltado al final. Ese es el nuevo atributo.

Instalando la nueva versión

Si ya usas <model-viewer>, es probable que importes el componente con las etiquetas <script> exactamente como se muestra en la documentación. Realizamos mejoras continuas. Si quieres probar funciones nuevas antes de implementarlas y actualizarlas de manera intencional, te recomendamos que instales una versión específica de <model-viewer>. Para ello, agrega el número de versión a las URLs del archivo como se muestra a continuación. Luego, consulta la página de versiones para ver las actualizaciones.

<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>

Conclusión

Prueba la nueva versión de <model-viewer> y danos tu opinión. Los problemas y comentarios son bienvenidos en GitHub.