Em fevereiro, lançamos o componente da Web <model-viewer>,
que permite adicionar de maneira declarativa um modelo 3D a uma página da Web enquanto hospeda o
modelo no seu próprio site. Uma coisa que ele não tinha era suporte à realidade aumentada. Ou
seja, não era possível renderizar a imagem de origem do componente em cima do feed
da câmera de um dispositivo.
Para isso, adicionamos suporte ao Magic Leap e ao Quick Look no iOS. Agora
anunciamos o suporte à RA no Android com a adição do atributo ar. Esse atributo é criado com base em um novo recurso do ARCore chamado Scene Viewer,
um app externo para visualizar modelos 3D. Para saber mais sobre o Scene Viewer,
consulte Como visualizar modelos 3D em RA em um navegador Android.
Vamos ver como fazer realidade aumentada com <model-viewer>.
O atributo
Um componente da Web, como você deve se lembrar, não exige conhecimento especial para ser usado. Ele
se comporta como um elemento HTML padrão, tendo uma tag exclusiva, propriedades
e métodos. Depois de
instalar com uma tag <script>,
use-o como qualquer outro elemento HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
É muito parecido com o que tinha no artigo anterior. Observe a coisa que 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.
Estamos sempre fazendo melhorias. Se você quiser testar novos recursos antes de
fazer a atualização e a implantação, instale uma versão específica
de <model-viewer>. Para fazer isso, adicione o número da versão aos URLs de arquivo, conforme mostrado
abaixo. Em seguida, confira
a página de lançamentos
para conferir as 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-vindos no GitHub.