Agregar modelos 3D a un sitio web puede ser complicado; <model-viewer> es tan fácil como escribir HTML.
Agregar modelos 3D a un sitio web es complicado. Lo ideal es que los modelos en 3D se muestren en un visor que pueda funcionar de manera responsiva en todos los navegadores, incluidos los smartphones, las computadoras de escritorio o incluso los nuevos visores de realidad virtual. El visor debe admitir la mejora progresiva 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 actualizado con las tecnologías actuales. Debe ser eficiente y accesible. Sin embargo, compilar un visor de este tipo requiere habilidades de programación en 3D especializadas 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 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 que se compila a partir de funciones estándar de la plataforma web. Un componente web se comporta, para todos los fines y propósitos, como un elemento
estándar. Tiene una etiqueta única, puede tener propiedades y métodos, y puede activar eventos y responder a ellos. En resumen, no necesitas saber nada especial para
usar ningún componente web, mucho menos <model-viewer>.
En este artículo, se abordan las funciones que son 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 funciones de <model-viewer>.
Modelos 3D básicos
Incorporar un modelo 3D es tan simple como el siguiente lenguaje de marcado. Si usas archivos glb, este componente funcionará en cualquier navegador importante.
<!-- 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>
Cómo retrasar la carga con imágenes de póster
Todos los modelos 3D tardan en cargarse, por lo que agregar un atributo poster
significa que 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 al renderizado en 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, con ajuste de escala para dispositivos móviles y computadoras de escritorio. También puede administrar varias instancias en una página y usa Intersection Observer para conservar la energía de la batería y los ciclos de GPU cuando un modelo no está visible.
Si usas el editor que se describió anteriormente para crear una imagen de póster, esa
imagen única coincidirá con la renderización en 3D, incluso cuando la relación de aspecto de <model-viewer>
responda a diferentes tamaños de pantalla.
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 puntos de acceso.