Adicionar modelos 3D a um site pode ser complicado; <model-viewer> é tão fácil quanto escrever HTML.
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.
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>
.
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.
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).