Hoje em dia, é comum as pessoas carregarem dispositivos capazes de realidade aumentada (RA) e realidade virtual (RV) no bolso. Cada vez mais, o conteúdo que compartilhamos uns com os outros nesses dispositivos é em 3D. Neste codelab, você vai aprender a usar um componente da Web chamado <model-viewer> para adicionar conteúdo 3D ao seu site ou Progressive Web App (PWA) com a mesma facilidade de adicionar uma imagem com HTML.
O que você criará
Um site com um modelo 3D interativo que pode mostrar hologramas de RA
O que você vai aprender
- Como instalar o componente da Web
<model-viewer>no seu site - Como usar
<model-viewer>para apresentar um modelo 3D em um layout da Web padrão - Como personalizar
<model-viewer>para dar um toque especial à apresentação
O que é necessário
- Um navegador da Web. Recomendamos o Chrome, mas qualquer navegador moderno (Firefox, Safari, Edge) funciona.
- Node.js e um editor de texto ou acesso ao Glitch.
- Conhecimento básico de HTML, CSS, JavaScript e Chrome DevTools.
Este codelab é focado em <model-viewer> e modelos 3D. Conceitos e blocos de códigos sem relevância não serão abordados. Eles são incluídos somente para você copiar e colar.
Opção 1: Glitch
Você pode usar uma ferramenta de edição de código on-line, como o Glitch, para hospedar seu projeto e conferir as mudanças.
Para começar a usar o Glitch, clique no botão a seguir:
Abra o ambiente pré-carregado do Glitch
A partir daqui, você pode usar o editor de código no Glitch para modificar seus arquivos e, quando estiver tudo pronto, comece a veicular seu aplicativo usando o botão "Show Live". Faça isso agora. Você vai ver a seguinte página:
Opção 2: servidor local
Um servidor local permite usar o editor de código de sua preferência.
Instalar o servidor
Precisamos de uma maneira de disponibilizar páginas da Web locais. Uma maneira simples é usar o Node.js e o serve, um servidor de conteúdo estático simples.
Consulte o site do Node.js para instruções sobre como instalar no seu sistema operacional. Depois que o Node.js for instalado, execute este comando para instalar o "serve":
npm install -g serve
Fazer o download do código
Um modelo inicial e todos os recursos de exemplo estão disponíveis para download. Clique no link a seguir e descompacte o conteúdo no diretório em que você quer armazenar o projeto:
Como alternativa, use o git para clonar o repositório:
git clone https://github.com/googlecodelabs/model-viewer-codelab.git
Como executar o servidor
No diretório de modelo extraído acima (ou no diretório clonado, se você usou o git), execute o comando serve para iniciar um servidor da Web:
Acesse esse endereço (na captura de tela acima, é http://localhost:5000, mas pode ser diferente na sua máquina) para conferir um ponto de partida muito simples:
Vamos começar editando o arquivo index.html, usando o editor da Web do Glitch ou, se você estiver usando o servidor local, seu editor de código favorito.
Adicionar a biblioteca <model-viewer>
Precisamos incluir um conjunto de arquivos JavaScript para usar <model-viewer>.
A seção a seguir adiciona a biblioteca <model-viewer> à sua página. Cole o seguinte código no fim de <body>.
<!-- 💁 Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>Acabamos de adicionar bibliotecas sem mudar o conteúdo. Se você atualizar a página, vai ver o mesmo conteúdo. Se você abrir o console do DevTools, poderá ver alguns avisos sobre APIs WebXR ausentes, mas isso é esperado até que a API seja totalmente lançada.
Maximizar a compatibilidade
O <model-viewer> oferece suporte a muitos navegadores modernos. No entanto, se você quiser aumentar o número de navegadores compatíveis com sua página, inclua mais polyfills.
Confira abaixo o conjunto completo de recomendações. Isso vai ajudar você a oferecer uma ótima experiência em todos os navegadores modernos. Consulte a documentação sobre polyfills do<model-viewer> para mais informações.
Cole o código a seguir em <head>.
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->Adicionar <model-viewer>
Agora vamos adicionar a tag <model-viewer> à página para que possamos ver um pouco de 3D. Substitua o elemento <p> pelo seguinte código:
<model-viewer src="third_party/Astronaut/Astronaut.glb"
alt="A 3D model of an astronaut">
</model-viewer>Há apenas dois atributos a serem mencionados aqui:
- O atributo
srcespecifica de onde carregar o modelo 3D. Neste exemplo, usamos um modelo de Astronauta do Poly, que foi disponibilizado sob a licença CC-BY. - O atributo
altcontém uma descrição de texto alternativa do modelo para acessibilidade.
Você vai notar que esses dois atributos têm paralelos fortes com os atributos da tag img.
Uma atualização vai mostrar o astronauta:
Legal! Agora você tem um modelo 3D na Web!
Nas etapas a seguir, vamos testar mais interatividade e movimento, alterar a aparência do elemento e começar a usar a RA.
Vamos adicionar um pouco de interatividade ao modelo. Por padrão, o modelo vai girar para dar aos usuários uma dica de que ele é interativo (e também para mostrar o modelo). Depois, vamos ativar os controles para que os usuários possam mover o modelo com o mouse ou por toque.
Para fazer isso, basta adicionar os atributos auto-rotate e camera-controls ao elemento <model-viewer>.
<model-viewer src="third_party/Astronaut/Astronaut.glb"
auto-rotate camera-controls
alt="A 3D model of an astronaut">
</model-viewer>Quando você atualizar a página, o astronauta vai girar lentamente. Se você tentar arrastar o modelo (clicando e movendo o mouse ou arrastando o dedo em um dispositivo sensível ao toque), ele vai girar.
Juntos, esses recursos dão ao usuário uma dica de que essa é mais do que apenas uma imagem estática, além de uma sensação de interatividade para que ele se sinta envolvido (e possa ver a parte de trás do seu modelo).
Agora que temos algum movimento, vamos ajustar a aparência para deixar o modelo realmente atraente.
Atualizar o modelo
Algumas delas (principalmente as mudanças de iluminação) aparecem melhor com determinados modelos. Primeiro, vamos atualizar o atributo src para apontar para um novo modelo: third_party/DamagedHelmet/DamagedHelmet.gltf (lançado sob uma licença Creative Commons Atribuição-Não Comercial no Sketchfab). A origem de todo o elemento agora deve ser:
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
auto-rotate camera-controls
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Esse modelo vai mostrar algumas das mudanças que vamos fazer.
Mudar a cor do plano de fundo
Primeiro, vamos mudar a cor de fundo para que o modelo se destaque na página. Adicione o seguinte atributo à sua tag <model-viewer>:
background-color="#70BCD1"
Definir o mapa de ambiente
Os mapas de ambiente são usados para fornecer uma cena envolvente que é refletida do modelo e para especificar a configuração de iluminação. A iluminação padrão é excelente (e compatível com a iluminação do Scene Viewer do ARCore), mas às vezes você pode ter um ambiente personalizado ou precisar de uma iluminação específica para os resultados que quer alcançar. Vamos especificar o atributo environment-image (studio_small_07_1k.hdr é de hdrihaven.com).
environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"
Adicionar uma sombra
Fazer com que o objeto projete uma sombra dá mais profundidade à cena. O atributo a seguir, quando adicionado ao elemento <model-viewer>, vai projetar uma sombra:
shadow-intensity="1"
Mudar a intensidade da iluminação
O modelo está um pouco escuro. Vamos aumentar um pouco as luzes para que possamos ver mais detalhes. A iluminação padrão do palco e a iluminação do mapa de ambiente que adicionamos podem ser ajustadas de forma independente. Adicione:
stage-light-intensity="3" environment-intensity="2"Cada uma dessas mudanças foi bem pequena, mas o modelo parece muito melhor agora.
Em seguida, vamos conferir alguns modos de exibição alternativos.
Cada vez mais dispositivos têm algum tipo de realidade aumentada (RA) disponível. Alguns desses modos são difíceis de acionar ou exigem um código especial, mas o <model-viewer> pode lidar com toda essa complexidade para você.
Scene Viewer do ARCore
Em dispositivos compatíveis, o <model-viewer> pode acionar o Scene Viewer do ARCore. Adicione o atributo ar ao elemento <model-viewer>. Sim, é só isso!
<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
ar
auto-rotate camera-controls
background-color="#70BCD1"
shadow-intensity="1"
alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>Agora, se você visualizar isso em um dispositivo compatível com uma versão recente do ARCore, vai aparecer um ícone adicional, como na imagem abaixo. Ao clicar nele, seu modelo será aberto no Scene Explorer.
Outros dispositivos: iOS Quick Look, Magic Leap, WebXR
Muitos outros dispositivos precisam de um pouco mais de trabalho.
No iOS, o atributo ios-src permite especificar uma versão USDZ adicional do modelo 3D, que é obrigatória no iOS. Quando esse atributo é fornecido, o ícone padrão do AR Quick Look aparece no modelo para dispositivos iOS compatíveis. Para mais informações sobre USDZ, consulte a documentação para desenvolvedores da Apple.
Em dispositivos Magic Leap, o atributo magic-leap ativa o suporte à RA. Também é necessário incluir a biblioteca prismatic.js (incluída, mas comentada, nos polyfills opcionais), e o modelo 3D precisa ser um arquivo .glb, não .gltf.
<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>É possível controlar o ângulo e a posição iniciais da câmera. Com esse controle, podemos mostrar aos usuários uma visualização padrão melhor do capacete. Adicione o seguinte snippet à sua tag <model-viewer>:
camera-orbit="-20deg 75deg 2m"
É claro que esses modelos podem ser usados com outros conteúdos, inclusive em páginas responsivas. Criar uma página da Web responsiva está além do escopo deste codelab, mas confira Fundamentos de Web design responsivo para mais informações.
Incluímos uma página de amostra no nosso repositório. Confira responsive.html em widescreen (como um computador):
A mesma página em uma janela de visualização estreita (como um dispositivo móvel):
Você incorporou um conteúdo 3D na Web. Bom trabalho!
Qual é a próxima etapa?
Há muitas outras opções de configuração. Confira nossa documentação on-line ou o código para mais informações.
Depois de identificar os modelos, pense nas próximas etapas:
- Alguns modelos podem ser muito grandes. Nesses casos, <model-viewer> oferece vários métodos para ainda oferecer experiências excelentes. A página de documentação Carregamento lento tem mais informações.
- Modelos animados podem ser muito divertidos! Confira nossa página Animações para mais informações sobre como ativar (e alternar entre) animações definidas nos seus modelos.
- E esta ainda é a Web: os modelos podem ser incorporados às suas páginas da Web para complementar o conteúdo.
Nosso processo de desenvolvimento é aberto no GitHub. Queremos saber sua opinião.