Agrega modelos 3D a la Web con <model-viewer>

Hoy en día, es común que las personas lleven dispositivos de realidad aumentada (RA) y realidad virtual (RV) en el bolsillo. Cada vez más, el contenido que compartimos en estos dispositivos es 3D. En este codelab, aprenderás a usar un componente web llamado <model-viewer> para agregar contenido 3D a tu sitio web o app web progresiva (AWP) con la misma facilidad que agregar 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 <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 el elemento <model-viewer> para agregar estilo a la presentación

Requisitos

  • Un navegador web 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 Herramientas para desarrolladores de Chrome

Este codelab se centra en los modelos <model-viewer> y 3D. Los conceptos y los bloques de código no relevantes se pasan por alto y se proporcionan para que simplemente los copie y pegue.

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

De aquí en adelante, puedes usar el editor de código de Glitch para modificar tus archivos y, cuando estés listo, comienza a entregar tu aplicación con el botón "Show Live" (Mostrar en vivo). Pruébalo 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 manera sencilla es con Node.js y serve, un servidor de contenido estático y 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, ejecute este comando para instalar la entrega:

npm install -g serve

Descarga el código

Hay una plantilla de inicio, junto con todos los elementos de muestra, disponible para descargar. Haz clic en el siguiente vínculo y descomprime el contenido en el directorio que desees que contenga el proyecto:

Descarga el código fuente

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 extraído 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 editando el archivo index.html, ya sea a través del editor web de Glitch o, si usas el servidor local, a tu editor de código favorito.

Agrega la biblioteca <model-viewer

Debemos incluir un conjunto de archivos de JavaScript para usar <model-viewer&gt.

En la siguiente sección, se agrega la biblioteca <model-viewer&gt 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 modificar el contenido. Si actualizas tu página, verás el mismo contenido. Si abres la consola de DevTools, es posible que veas algunas advertencias sobre las API de WebXR faltantes, pero se espera que se publiquen por completo esa API.

Maximiza la compatibilidad

Listo para usar, el modelo compatible con muchos navegadores modernos. Sin embargo, si deseas ampliar la cantidad de navegadores compatibles con tu página, puedes incluir polyfills adicionales.

Aquí encontrarás un conjunto completo recomendado. Estos elementos te ayudarán a brindar una gran experiencia en todos los navegadores actualizados. Para obtener más información, consulta la documentación sobre polyfills y polyfills 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>-->

Agregar <model-viewer>

Ahora, agreguemos la etiqueta real <model-viewer&gt a la página para que podamos ver algo de 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 para mencionar aquí:

  • El atributo src especifica desde dónde cargar el modelo 3D. En este ejemplo, utilizamos un modelo de Astronaut de Poly que está disponible bajo la licencia CC-BY.
  • El atributo alt contiene una descripción de texto alternativa del modelo para fines de accesibilidad.

Puede observar que ambos atributos tienen paralelos fuertes con atributos de la etiqueta img.

Una vez que se vuelva a cargar la página, se mostrará al astronauta:

¡Muy bien! Tienes un modelo 3D en la Web.


En los siguientes pasos, experimentaremos con más elementos interactivos y movimiento, modificaremos la apariencia del elemento y tendremos en cuenta los pies en RA.

Agreguemos un poco de interactividad al modelo. De forma predeterminada, el modelo girará para mostrar a los usuarios una sugerencia de que el modelo es interactivo (y también de mostrarlo) y, luego, habilitaremos los controles para que los usuarios puedan mover el modelo con el mouse o mediante el tacto.

Para ello, agrega de forma sencilla 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 (haciendo clic y moviendo el mouse, o si usas un dispositivo táctil al arrastrar el dedo), el modelo rotará.

Combinadas, estas funciones le dan al usuario una pista de que es más que solo una imagen estática y una sensación de interactividad para que se sienta involucrado (y pueda ver el reverso de tu modelo).

Ahora que tenemos un poco de movimiento, veamos cómo modificar la apariencia para que el modelo sea realmente atractivo.

Actualiza el modelo

Algunos de ellos (particularmente los cambios de iluminación) se mostrarán mejor con ciertos modelos. Primero, actualicemos el atributo src para que apunte a un nuevo modelo: third_party/DamagedHelmet/DamagedHelmet.gltf (se lanzó bajo una licencia de atribución no comercial de Creative Commons en Sketchfab). Ahora, la fuente de todo el elemento debería leer:

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

En este modelo, se mostrarán algunos de los cambios que estamos por hacer.

Cambiar el color de fondo

Primero, cambiemos el color de fondo para que el modelo se destaque en la página. Agregue el siguiente atributo a su etiqueta de <model-viewer&gt:

background-color="#70BCD1"

Configura el mapa de entorno

Los mapas de entorno se utilizan para proporcionar una escena envolvente que se refleje en el modelo y 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 iluminación específica para los resultados que intentas alcanzar. Especifiquemos el atributo de imagen de entorno (studio_small_07_1k.hdr es de hdrihaven.com).

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

Agregar una sombra

Hacer que el objeto proyecte una sombra proporciona mayor profundidad a la escena. El siguiente atributo, cuando se agrega a nuestro elemento <model-viewer>, proyectará una sombra:

shadow-intensity="1"

Cómo cambiar la intensidad de la iluminación

El modelo es un poco oscuro, pero vamos a poner las luces un poco más para que podamos ver más detalles. Tanto la iluminación predeterminada de la etapa como la iluminación del mapa de Environmap que agregamos pueden ajustarse 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 cuentan con realidad aumentada (RA). Algunos de estos modos son difíciles de activar o requieren código especial, pero <model-viewer&gt puede manejar toda esa complejidad por ti.

Visualizador de escenas de ARCore

En los dispositivos compatibles, se puede activar el espectador de escenas de ARCore. Agrega el atributo ar a tu elemento <model-viewer> y sí, esto 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 un ARCore reciente, verás un ícono adicional (como en la siguiente imagen). Si haces clic, se abrirá el modelo en el Explorador de escenas.

Otros dispositivos: Vista rápida de iOS, Leap Magic, WebXR

Muchos otros dispositivos necesitan un poco más de trabajo.

En iOS, el atributo ios-src permite especificar una versión adicional del formato 3D en USDZ (que es obligatoria en iOS). Cuando se proporcione este atributo, el ícono estándar de RA de RA aparecerá en el modelo para los dispositivos iOS compatibles. Si deseas obtener más información sobre el USDZ, consulta la documentación para desarrolladores de Apple.

En dispositivos con Leap mágico, el atributo magic-leap habilitará la compatibilidad con RA. Ten en cuenta que también debes incluir la biblioteca prismatic.js (esto se incluye, pero se comenta 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 puede controlar el ángulo y la posición iniciales de la cámara. Este control nos permite mostrarles a los usuarios una mejor vista predeterminada. Agregue el siguiente fragmento a su etiqueta de <model-viewer&gt:

camera-orbit="-20deg 75deg 2m"

Estos modelos pueden usarse con tu otro contenido, incluso en páginas responsivas. La creación de una página web responsiva está fuera del alcance de este codelab, pero consulta Conceptos básicos sobre el diseño web responsivo para obtener información adicional.

Incluimos una página de ejemplo en nuestro repositorio. Mira responsive.html en pantalla panorámica (como una computadora de escritorio):

La misma página, en un viewport estrecho (como un dispositivo móvil):

Incorporaste contenido 3D en la Web. ¡Buen trabajo!

¿Qué sigue?

Existen muchas opciones de configuración más. Para obtener más información, consulta nuestra documentación en línea o el código.

Una vez que haya identificado sus modelos, considere los siguientes pasos:

  • Algunos modelos pueden ser bastante grandes. En estos casos, <model-viewer&gt proporciona varios métodos para brindar experiencias excelentes. La página de documentación Carga diferida tiene más información.
  • Los modelos animados pueden ser muy divertidos. Consulta nuestra página de animaciones para obtener más información sobre cómo habilitar (y alternar entre) animaciones que se definen en tus modelos.
  • Además, esta es la Web: puedes incorporar modelos en tus páginas web para complementar tu contenido.

Nuestro proceso de desarrollo está abierto en GitHub. Nos gustaría conocer tu opinión.