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 los
en tu propio sitio. Una cosa que no admitía era la realidad aumentada. Que
no pudiste renderizar la imagen de origen del componente sobre la imagen de origen de un dispositivo
feed de la cámara.
Para ello, agregamos compatibilidad con Magic Leap y Quick Look en iOS. Ahora
Anunciamos la compatibilidad con RA en Android junto con la incorporación de ar
. Este atributo se basa en una nueva función de ARCore llamada Scene Viewer.
una aplicación 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.
Veamos cómo usar la realidad aumentada con <model-viewer>.
El atributo
Como recordarás, un componente web no requiere conocimientos especiales para su uso. Integra
Se comporta como un elemento HTML estándar, tiene una etiqueta única y también propiedades
y métodos. Después del
instalarlo con una etiqueta <script>
lo usarás 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 parece mucho a lo que tenía en mi artículo anterior. Presta atención que he destacado al final. Ese es el nuevo atributo.
Instalando la nueva versión
Si ya usas <model-viewer>, es probable que estés importando el componente.
usando exactamente las etiquetas <script>
como se muestra en la documentación.
Hacemos mejoras continuamente. Si quieres probar funciones nuevas antes
implementa y actualiza deliberadamente, desearás instalar 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, mira
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 los comentarios son
bienvenida en GitHub.