El componente web <model-viewer>

Agregar modelos 3D a un sitio web puede ser complicado. <model-viewer> es tan fácil como escribir HTML.

Joe Medley
Joe Medley

Agregar modelos 3D a un sitio web es complicado. Lo ideal es que los modelos 3D se muestren en un visor que pueda funcionar de forma responsiva en todos los navegadores, incluidos los smartphones, las computadoras de escritorio o incluso las nuevas pantallas montadas en la cabeza. El visor debe admitir mejoras progresivas para el rendimiento y la calidad de renderización. Debe admitir casos de uso en todos los dispositivos, desde smartphones más antiguos y de menor potencia hasta dispositivos más nuevos que admitan realidad aumentada. Debe mantenerse al día con las tecnologías actuales. Debe ser accesible y tener un buen rendimiento. Sin embargo, compilar un visor de este tipo requiere habilidades especializadas de programación en 3D y puede ser un desafío para los desarrolladores web que desean alojar sus propios modelos en lugar de usar un servicio de alojamiento de terceros.

Sin embargo, el componente web <model-viewer> te permite agregar de forma declarativa un modelo 3D a una página web y, al mismo tiempo, alojarlo en tu propio sitio. El objetivo del componente es permitir agregar modelos 3D a tu sitio web sin comprender la tecnología y las plataformas subyacentes. El componente web admite el diseño responsivo y casos de uso como la realidad aumentada en algunos dispositivos. Incluye funciones de accesibilidad, calidad de renderización e interactividad.

¿Qué es un componente web?

Un componente web es un elemento HTML personalizado compilado a partir de las funciones estándar de la plataforma web. Un componente web se comporta, a todos los efectos, como un elemento estándar. Tiene una etiqueta única, puede tener propiedades y métodos, y puede activar y responder a eventos. En resumen, no necesitas saber nada especial para usar cualquier componente web, y mucho menos <model-viewer>.

En este artículo, se describen las funciones específicas de <model-viewer>. Si te interesa obtener más información sobre los componentes web, webcomponents.org es un buen lugar para comenzar.

¿Qué puede hacer <model-viewer>?

En los siguientes ejemplos, se muestran algunas capacidades de <model-viewer>.

Modelos 3D básicos

Incorporar un modelo 3D es tan simple como el siguiente marcado. Si usas archivos glb, este componente funcionará en cualquier navegador principal.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
  id="mv-shark"
   src="shark.glb"
  camera-controls
></model-viewer>

Ese código se renderiza de la siguiente manera:

Agrega movimiento e interactividad

Los atributos auto-rotate y camera-controls proporcionan control de movimiento y del usuario. Esos no son los únicos atributos posibles. Consulta la documentación para obtener una lista completa de atributos.

<model-viewer src="shark.glb" auto-rotate camera-controls>

Retrasa la carga con imágenes de póster

Todos los modelos 3D tardan en cargarse. Si agregas un atributo poster, se mostrará una imagen hasta que el modelo esté listo para usarse. Con el editor, se puede generar una imagen de póster que se verá idéntica a la renderización en 3D.

<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">

Diseño responsivo

El componente controla algunos tipos de diseño responsivo y se ajusta para dispositivos móviles y computadoras. También puede administrar varias instancias en una página y usa Intersection Observer para conservar la batería y los ciclos de la GPU cuando un modelo no está visible.

El uso del editor descrito anteriormente para crear una imagen de póster permite que esa imagen coincida con la renderización en 3D, incluso cuando la relación de aspecto de <model-viewer> responde a diferentes tamaños de pantalla.

Varias imágenes de trajes espaciales que representan la capacidad de respuesta.
Varias imágenes de trajes espaciales que representan la capacidad de respuesta.

Más funciones

Explora la documentación de <model-viewer> para ver demostraciones de funciones más avanzadas. Entre ellas, se incluye la capacidad de agregar un firmamento proyectado en el suelo, crear texturas animadas y puntos de acceso.