O componente da Web <model-viewer>

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

Joe Medley

Atenção: uma ou mais demonstrações nesta página não funcionam mais, porque o Glitch encerrou a hospedagem.

Adicionar modelos 3D a um site é complicado. O ideal é que os modelos 3D sejam mostrados em um visualizador que funcione de forma responsiva em todos os navegadores, incluindo smartphones, computadores ou até mesmo novos óculos de realidade virtual. O visualizador precisa ser compatível com o aprimoramento progressivo para melhorar o desempenho e a qualidade de renderização. Ele precisa ser compatível com casos de uso em todos os dispositivos, desde smartphones mais antigos e de menor potência até dispositivos mais novos que oferecem suporte à realidade aumentada. Ela precisa se manter atualizada com as tecnologias atuais. Ele precisa ser eficiente e acessível. No entanto, criar um visualizador desse tipo requer habilidades de programação 3D especializadas e pode ser um desafio para desenvolvedores 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 de forma declarativa um modelo 3D a uma página da Web, enquanto hospeda 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 subjacentes. O componente da Web é compatível com design responsivo e casos de uso como realidade aumentada em alguns dispositivos. Ele inclui recursos de acessibilidade, qualidade de renderização e interatividade.

Observação: confira as atualizações recentes do <model-viewer> no GitHub.

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. Para todos os efeitos, 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 de especial para usar qualquer componente da Web, muito menos o <model-viewer>.

Este artigo aborda recursos específicos do <model-viewer>. Se você quiser saber mais sobre componentes da Web, o webcomponents.org é um bom lugar para começar.

O que a <model-viewer> faz?

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

Observação: leia Interactive 3D on the web with hardware do Google: experiências de educação de última geração para produtos para saber como o Google usou o <model-viewer> para criar uma experiência interativa para produtos como o Pixel Fold.

Modelos 3D básicos

Para incorporar um modelo 3D, basta usar a marcação a seguir. Ao usar arquivos glb, esse componente vai funcionar em qualquer 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>

Esse código é renderizado assim:

Dê movimento e interatividade

Os atributos auto-rotate e camera-controls fornecem controle de movimento e do usuário. Esses não são os únicos atributos possíveis. Consulte a documentação para ver 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 em 3D pode ser gerada usando o editor.

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

Design responsivo

O componente lida com alguns tipos de design responsivo, escalonando 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 imagem única corresponda à renderização em 3D, mesmo que a proporção de <model-viewer> responda a diferentes tamanhos de tela.

Várias imagens de trajes espaciais representando a responsividade.

Mais recursos

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