Hoy en día, es común que las personas lleven en sus bolsillos dispositivos capaces de usar realidad aumentada (RA) y realidad virtual (RV). Cada vez más, el contenido que compartimos entre nosotros en estos dispositivos es en 3D. En este codelab, aprenderás a usar un componente web llamado <model-viewer> para agregar contenido 3D a tu sitio web o aplicación web progresiva (PWA) con la misma facilidad con la que agregarías una imagen con HTML.
Qué compilarás
Un sitio web que contiene un modelo 3D interactivo con la capacidad de mostrar hologramas de RA
Qué aprenderás
- Cómo instalar el componente web de
<model-viewer>en tu sitio web - Cómo usar
<model-viewer>para presentar un modelo 3D en un diseño web estándar - Cómo personalizar
<model-viewer>para agregarle estilo a la presentación
Requisitos
- Un navegador web Te recomendamos Chrome, pero cualquier navegador moderno (Firefox, Safari, Edge) funcionará.
- Node.js y un editor de texto, o acceso a Glitch
- Conocimientos básicos de HTML, CSS, JavaScript y las Herramientas para desarrolladores de Chrome
Este codelab se enfoca en <model-viewer> y los modelos 3D. Los conceptos y los bloques de código no relacionados con esos temas se abordan superficialmente y se proporcionan para que simplemente los copies y pegues.
Opción 1: Glitch
Puedes usar una herramienta de edición de código en línea, como Glitch, para alojar tu proyecto y ver los cambios.
Para comenzar a usar Glitch, haz clic en el siguiente botón:
Abre tu entorno de Glitch precargado
A partir de ahora, puedes usar el editor de código en Glitch para modificar tus archivos y, cuando estés listo, comienza a publicar tu aplicación con el botón "Show Live". Inténtalo ahora y deberías ver la siguiente página:
Opción 2: Servidor local
Un servidor local te permitirá usar tu editor de código preferido.
Instala el servidor
Necesitaremos una forma de entregar páginas web locales. Una forma sencilla es a través de Node.js y serve, un servidor de contenido estático simple.
Consulta el sitio web de Node.js para obtener instrucciones sobre cómo instalarlo en tu sistema operativo. Después de instalar Node.js, ejecuta este comando para instalar serve:
npm install -g serve
Descarga el código
Puedes descargar una plantilla inicial junto con todos los recursos de muestra. Haz clic en el siguiente vínculo y descomprime el contenido en el directorio en el que deseas que se encuentre tu proyecto:
Como alternativa, usa git para clonar el repositorio:
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
Ejecuta el servidor
Desde el directorio de plantillas que se extrajo anteriormente (o dentro del directorio clonado, si usaste git), ejecuta el comando serve para iniciar un servidor web:
Visita esa dirección (en la captura de pantalla anterior, es http://localhost:5000, pero puede ser diferente en tu máquina) para ver un punto de partida muy simple:
Comenzaremos por editar el archivo index.html, ya sea a través del editor web de Glitch o, si usas el servidor local, tu editor de código favorito.
Agrega la biblioteca <model-viewer>
Para usar <model-viewer>, deberemos incluir un conjunto de archivos JavaScript.
En la siguiente sección, se agrega la biblioteca <model-viewer> a tu página. Pega el siguiente código al final de <body>.
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>Acabamos de agregar bibliotecas sin cambiar el contenido. Si actualizas la página, verás el mismo contenido. Si abres la consola de Herramientas para desarrolladores, es posible que veas algunas advertencias sobre las APIs de WebXR faltantes, pero esto es normal hasta que se lance la API por completo.
Cómo maximizar la compatibilidad
De forma predeterminada, <model-viewer> admite muchos navegadores modernos. Sin embargo, si deseas ampliar la cantidad de navegadores que admite tu página, puedes incluir polyfills adicionales.
A continuación, se incluye el conjunto completo de recomendaciones. Esto te ayudará a brindar una excelente experiencia en todos los navegadores modernos. Consulta la documentación sobre los rellenos de<model-viewer> para obtener más información.
Pega el siguiente código en <head>.
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->Agrega <model-viewer>
Ahora agreguemos la etiqueta <model-viewer> real a la página para que podamos ver algo en 3D. Reemplaza el elemento <p> existente por el siguiente código:
<model-viewer src="third_party/Astronaut/Astronaut.glb"
alt="A 3D model of an astronaut">
</model-viewer>Solo hay dos atributos que mencionar aquí:
- El atributo
srcespecifica desde dónde se cargará el modelo 3D. En este ejemplo, usamos un modelo de Astronauta de Poly que está disponible bajo la licencia CC-BY. - El atributo
altcontiene una descripción de texto alternativa del modelo para la accesibilidad.
Es posible que observes que ambos atributos tienen fuertes paralelismos con los atributos de la etiqueta img.
Si vuelves a cargar la página, se mostrará el astronauta:
¡Genial! ¡Ya tienes un modelo 3D en la Web!
En los siguientes pasos, experimentaremos con más interactividad y movimiento, modificaremos la apariencia del elemento y nos iniciaremos en la RA.
Agreguemos un poco de interactividad al modelo. El modelo girará de forma predeterminada para darles a los usuarios una pista de que es interactivo (y también para mostrarlo), y luego habilitaremos los controles para que los usuarios puedan mover el modelo por su cuenta con el mouse o con el tacto.
Para ello, simplemente agrega los atributos auto-rotate y camera-controls al elemento <model-viewer>.
<model-viewer src="third_party/Astronaut/Astronaut.glb"
auto-rotate camera-controls
alt="A 3D model of an astronaut">
</model-viewer>Cuando actualices la página, el astronauta girará lentamente. Si intentas arrastrar el modelo (ya sea haciendo clic y moviendo el mouse, o bien arrastrando el dedo si estás en un dispositivo táctil), el modelo rotará.
En conjunto, estas funciones le dan al usuario una pista de que se trata de algo más que una imagen estática y una sensación de interactividad para que se sienta involucrado (y pueda ver la parte posterior de tu modelo).
Ahora que tenemos algo de movimiento, veamos cómo ajustar la apariencia para que el modelo sea realmente atractivo.
Actualiza el modelo
Algunos de estos cambios (en particular, los de iluminación) se verán mejor con ciertos modelos. Primero, actualicemos el atributo src para que apunte a un modelo nuevo: third_party/DamagedHelmet/DamagedHelmet.gltf (publicado bajo una licencia de Creative Commons Attribution-NonCommercial en Sketchfab). El código fuente del elemento completo ahora debería decir lo siguiente:
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
auto-rotate camera-controls
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Este modelo mostrará algunos de los cambios que estamos a punto de realizar.
Cambiar el color de fondo
Primero, cambiemos el color de fondo para que el modelo se destaque en la página. Agrega el siguiente atributo a tu etiqueta <model-viewer>:
background-color="#70BCD1"
Cómo establecer el mapa del entorno
Los mapas de entorno se usan para proporcionar una escena envolvente que se refleja en el modelo y para especificar la configuración de iluminación. La iluminación predeterminada es excelente (y compatible con la iluminación del Visor de escenas de ARCore), pero, a veces, es posible que tengas un entorno personalizado o que necesites una iluminación específica para los resultados que intentas lograr. Especificaremos el atributo de imagen del entorno (studio_small_07_1k.hdr proviene de hdrihaven.com).
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
Cómo agregar una sombra
Hacer que el objeto proyecte una sombra le da más profundidad a la escena. El siguiente atributo, cuando se agrega a nuestro elemento <model-viewer>, proyectará una sombra:
shadow-intensity="1"
Cambia la intensidad de la iluminación
El modelo está un poco oscuro. Subamos un poco las luces para que podamos ver más detalles. Tanto la iluminación de escenario predeterminada como la iluminación del mapa de entorno que agregamos se pueden ajustar de forma independiente. Agrega lo siguiente:
stage-light-intensity="3" environment-intensity="2"Cada uno de estos cambios fue bastante pequeño, pero el modelo se ve mucho mejor ahora.
A continuación, veremos algunos modos de visualización alternativos.
Cada vez más dispositivos tienen algún tipo de realidad aumentada (RA) disponible. Algunos de estos modos son difíciles de activar o requieren código especial, pero <model-viewer> puede controlar toda esa complejidad por ti.
Scene Viewer de ARCore
En los dispositivos compatibles, <model-viewer> puede activar el Visor de escenas de ARCore. Agrega el atributo ar a tu elemento <model-viewer>. Sí, eso es todo lo que tienes que hacer.
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
ar
auto-rotate camera-controls
background-color="#70BCD1"
shadow-intensity="1"
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Ahora, si ves esto en un dispositivo compatible con una versión reciente de ARCore, verás un ícono adicional (como en la imagen a continuación). Si haces clic en él, se abrirá tu modelo en el Explorador de escenas.
Otros dispositivos: Quick Look de iOS, Magic Leap y WebXR
Muchos otros dispositivos necesitan un poco más de trabajo.
En iOS, el atributo ios-src permite especificar una versión USDZ adicional del modelo 3D (que se requiere en iOS). Cuando se proporciona este atributo, el ícono estándar de Visualización rápida en RA aparecerá en el modelo para los dispositivos iOS compatibles. Para obtener más información sobre USDZ, consulta la documentación para desarrolladores de Apple.
En los dispositivos Magic Leap, el atributo magic-leap habilitará la compatibilidad con RA. Ten en cuenta que también debes incluir la biblioteca prismatic.js (se incluye, pero está comentada, en los polyfills opcionales) y el modelo 3D debe ser un archivo .glb (no un .gltf).
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>Se pueden controlar el ángulo y la posición iniciales de la cámara. Este control nos permite mostrarles a los usuarios una mejor vista predeterminada del casco. Agrega el siguiente fragmento a tu etiqueta <model-viewer>:
camera-orbit="-20deg 75deg 2m"
Por supuesto, estos modelos se pueden usar con tu otro contenido, incluso en páginas responsivas. La creación de una página web responsiva no es el objetivo de este codelab, pero consulta Conceptos básicos del diseño web responsivo para obtener más información.
Incluimos una página de muestra en nuestro repo. Mira responsive.html en pantalla ancha (como en una computadora de escritorio):
La misma página, en un viewport estrecho (como el de un dispositivo móvil):
Integraste contenido en 3D en la Web. ¡Buen trabajo!
¿Qué sigue?
Existen muchas más opciones de configuración. Consulta nuestra documentación en línea o el código para obtener más información.
Una vez que hayas identificado tus modelos, estos son algunos pasos que puedes considerar:
- Algunos modelos pueden ser bastante grandes. En estos casos, <model-viewer> proporciona varios métodos para seguir ofreciendo experiencias excelentes. En la página de documentación de Carga diferida, encontrarás más información.
- Los modelos animados pueden ser muy divertidos. Consulta nuestra página Animaciones para obtener más información sobre cómo habilitar (y cambiar entre) las animaciones definidas en tus modelos.
- Y esto sigue siendo la Web: los modelos se pueden incorporar en tus páginas web para complementar tu contenido.
Nuestro proceso de desarrollo está abierto en GitHub. Queremos conocer tu opinión.