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. Una cosa que no admitía era la realidad aumentada. Es decir, no puedes renderizar la imagen de origen del componente sobre el feed de la cámara de un dispositivo.
Para ello, agregamos compatibilidad con Magic Leap y Quick Look en iOS. Ahora anunciamos la compatibilidad con RA en Android con la adición del atributo ar. Este atributo se basa en una nueva función de ARCore llamada Scene Viewer, una app externa para ver modelos en 3D. Para obtener más información sobre Scene Viewer, consulta Cómo ver modelos 3D en RA desde un navegador de Android.
Veamos cómo crear realidad aumentada con <model-viewer>.
El atributo
Como recordarás, un componente web no requiere conocimientos especiales para usarlo. Se comporta como un elemento HTML estándar, tiene una etiqueta única, así como 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 parecido a lo que tenía en mi artículo anterior. Observa lo que destaqué al final. Ese es el atributo nuevo.
Cómo instalar la versión nueva
Si ya usas <model-viewer>, es probable que estés importando el componente con las etiquetas <script> exactamente como se muestra en la documentación.
Realizamos mejoras de forma continua. Si quieres probar funciones nuevas antes de actualizar e implementar de forma deliberada, deberás instalar una versión específica de <model-viewer>. Para ello, agrega el número de versión a las URLs de los archivos, como se muestra a continuación. Luego, consulta
la página de lanzamientos
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 los comentarios son bienvenidos en GitHub.