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

Adicionar modelos 3D a um site é complicado. O ideal é que os modelos 3D sejam exibidos em um visualizador que funcione de forma responsiva em todos os navegadores, incluindo smartphones, computadores ou até mesmo telas de cabeça novas. O espectador precisa oferecer suporte ao aprimoramento progressivo para melhorar o desempenho e a qualidade da renderização. Ele precisa oferecer suporte a casos de uso em todos os dispositivos, desde smartphones mais antigos e menos potentes até dispositivos mais novos com suporte à realidade aumentada. Ele precisa estar sempre atualizado com as tecnologias atuais. Ele precisa ter um bom desempenho e ser acessível. No entanto, criar esse visualizador exige habilidades especiais de programação em 3D e pode ser um desafio para os desenvolvedores da Web que querem hospedar seus 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 maneira declarativa um modelo 3D 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 site sem entender a tecnologia e as plataformas subjacentes. O componente da Web oferece suporte ao design responsivo e a casos de uso como realidade aumentada em alguns dispositivos. Ele inclui recursos de acessibilidade, qualidade de renderização e interatividade.

Observação: é possível conferir as atualizações recentes do <model-viewer> no GitHub.

O que é um componente da Web?

Um componente da Web é um elemento HTML personalizado criado a partir de recursos padrão da plataforma da Web. Um componente da Web se comporta como um elemento padrão para todas as intents e finalidades. Ela tem uma tag exclusiva, pode ter propriedades e métodos e pode disparar e responder a eventos. Resumindo, 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, o site webcomponents.org é um bom ponto de partida.

O que o <model-viewer> faz?

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

Observação :leia 3D interativo na Web com o hardware do Google: experiências educativas de última geração 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

Incorporar um modelo 3D é tão simples quanto a marcação a seguir. Ao usar arquivos glb, esse componente funciona 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:

Adicione 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 uma lista completa de atributos.

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

Atrasar o carregamento com imagens do pôster

Todos os modelos 3D levam tempo para carregar. Adicionar um atributo poster significa que uma imagem vai ser mostrada até que o modelo esteja pronto para uso. É possível gerar uma imagem do pôster idêntica à renderização 3D usando o editor.

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

Design responsivo

O componente processa 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 uma 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 que representam a capacidade de resposta.

Mais recursos

Acesse a documentação do <model-viewer> para ver demonstrações de recursos mais avançados. Isso inclui a capacidade de adicionar uma skybox projetada no solo e criar texturas animadas e pontos de acesso (links em inglês).