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 funciona de manera responsiva en todos los navegadores, incluidos smartphones, computadoras de escritorio o, incluso, nuevas pantallas de cabeza. El visualizador debe admitir la mejora progresiva para el rendimiento y la calidad de la renderización. Debe admitir casos de uso en todos los dispositivos, desde smartphones antiguos con menor potencia hasta dispositivos más nuevos compatibles con la realidad aumentada. Debe mantenerse al día con las tecnologías actuales. Debe ser eficaz y accesible. Sin embargo, compilar un visor de este tipo requiere habilidades especiales 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 hosting de terceros.

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

¿Qué es un componente web?

Un componente web es un elemento HTML personalizado compilado a partir de las funciones de la plataforma web estándar. Un componente web se comporta para todos los intents y propósitos como un elemento estándar. Tiene una etiqueta única, puede tener propiedades y métodos, y puede activarse 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 funciones específicas de <model-viewer>. Si te interesa obtener más información sobre los componentes web, webcomponents.org es un buen punto de partida.

¿Qué puede hacer <model-viewer>?

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

Modelos 3D básicos

La incorporación de un modelo 3D es tan simple como el siguiente lenguaje de marcado. Además, usa archivos glb para que funcione 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>

El código se procesa de la siguiente manera:

Agrega interactividad y movimiento

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

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

Cómo retrasar 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. Se puede generar una imagen de póster que se verá idéntica a la renderización 3D con el editor.

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

Diseño responsivo

El componente controla algunos tipos de diseño responsivo, que se escalan para dispositivos móviles y computadoras de escritorio. También puede administrar varias instancias en una página y usa Intersection Observer para conservar batería y ciclos de 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> corresponde 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. Estas incluyen la capacidad de agregar un skybox proyectado en el suelo y crear texturas animadas y hotspots.