Em fevereiro, apresentamos o componente da Web <model-viewer>,
que permite adicionar de forma declarativa um modelo 3D a uma página da Web, enquanto hospeda a
o modelo no seu site. Ele não era compatível com realidade aumentada. Isso
não é possível renderizar a imagem de origem do componente sobre a
a transmissão da câmera.
Para isso, adicionamos suporte ao Magic Leap e ao Quick Look no iOS. Agora
estamos anunciando a compatibilidade com RA no Android com a adição da ar
. Esse atributo foi criado em um novo recurso do ARCore chamado Scene Viewer,
um aplicativo externo para visualização de modelos 3D. Para saber mais sobre o Scene Viewer,
confira Como visualizar modelos 3D em RA em um navegador Android.
Vamos aprender a usar a realidade aumentada com o <model-viewer>.
O atributo
Um componente da Web, como você deve se lembrar, não exige conhecimento especial para ser usado. Ela
comporta-se como um elemento HTML padrão, tendo uma tag exclusiva e propriedades
e métodos. Depois
com uma tag <script>,
como qualquer outro elemento HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Isso é muito parecido com o que eu tinha em meu artigo anterior. Observe o elemento que eu destaquei no final. Esse é o novo atributo.
Instalando a nova versão
Se você já estiver usando <model-viewer>, provavelmente está importando o componente
usando as tags <script> exatamente
conforme mostrado na documentação.
Fazemos melhorias continuamente. Se você quiser testar novos recursos antes
atualizar e implantar deliberadamente, é melhor instalar uma versão
de <model-viewer>. Para fazer isso, adicione o número da versão aos URLs dos arquivos, conforme mostrado
a seguir. Depois, assista
a página de lançamentos
para atualizações.
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
Conclusão
Teste a nova versão do <model-viewer> e nos conte o que achou.
Problemas e feedback são
bem-vindo ao GitHub.