O componente da Web <model-viewer>

Adicionar modelos 3D a um site pode ser complicado. <model-viewer> é tão fácil quanto escrever HTML.

Joe Medley
Joe Medley

Adicionar modelos 3D a um site é complicado. Os modelos 3D são mostrados idealmente em um visualizador que pode funcionar de forma responsiva em todos os navegadores, incluindo smartphones, computadores ou até mesmo novas telas montadas na cabeça. O visualizador precisa oferecer suporte a aprimoramento progressivo para desempenho e qualidade de renderização. Ele precisa oferecer suporte a casos de uso em todos os dispositivos, desde smartphones mais antigos e de baixo consumo até dispositivos mais recentes com suporte à realidade aumentada. Ele precisa estar atualizado com as tecnologias atuais. Ele precisa ser eficiente e acessível. No entanto, criar esse visualizador requer habilidades especiais de programação 3D e pode ser um desafio para desenvolvedores da Web que querem hospedar os próprios modelos em vez de usar um serviço de hospedagem de terceiros.

No entanto, o componente da Web <model-viewer> permite adicionar um modelo 3D de forma declarativa a uma página da Web, hospedando o modelo no seu próprio site. O objetivo do componente é permitir a adição de modelos 3D ao seu site sem entender a tecnologia e as plataformas. O componente da Web oferece suporte a design responsivo e casos de uso como realidade aumentada em alguns dispositivos. Ele inclui recursos de acessibilidade, qualidade de renderização e interatividade.

O que é um componente da Web?

Um componente da Web é um elemento HTML personalizado criado com base em recursos padrão da plataforma da Web. Um componente da Web se comporta como um elemento padrão. Ele tem uma tag exclusiva, pode ter propriedades e métodos e pode disparar e responder a eventos. Em resumo, você não precisa saber nada especial para usar qualquer componente da Web, muito menos <model-viewer>.

Este artigo aborda recursos específicos do <model-viewer>. Se você quiser saber mais sobre componentes da Web, webcomponents.org é um bom ponto de partida.

O que a <model-viewer> faz?

Os exemplos a seguir demonstram alguns recursos do <model-viewer>.

Modelos 3D básicos

A incorporação de um modelo 3D é tão simples quanto a marcação a seguir. Ao usar arquivos glb, esse componente vai funcionar em qualquer 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>

Esse código é renderizado assim:

Adicionar movimento e interatividade

Os atributos auto-rotate e camera-controls fornecem movimento e controle do usuário. Esses não são os únicos atributos possíveis. Consulte a documentação para conferir uma lista completa de atributos.

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

Atrasar o carregamento com imagens de pôster

Todos os modelos 3D levam tempo para carregar. Adicionar um atributo poster significa que uma imagem será mostrada até que o modelo esteja pronto para uso. Uma imagem de pôster idêntica à renderização 3D pode ser gerada usando o editor.

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

Design responsivo

O componente processa alguns tipos de design responsivo, dimensionando para dispositivos móveis e computadores. Ele também pode gerenciar várias instâncias em uma página e usa o Intersection Observer para economizar bateria e ciclos de GPU quando um modelo não está visível.

Usar o editor descrito anteriormente para criar uma imagem de pôster permite que essa única imagem corresponda à renderização 3D, mesmo que a proporção de <model-viewer> responda a diferentes tamanhos de tela.

Várias imagens de trajes espaciais representando a capacidade de resposta.
Várias imagens de trajes espaciais representando a capacidade de resposta

Mais recursos

Confira a documentação da <model-viewer> para ver demonstrações de recursos mais avançados. Isso inclui a capacidade de adicionar um skybox projetado no solo, criar texturas animadas e pontos de acesso.