Em fevereiro, lançamos o componente da Web <model-viewer>
,
que permite adicionar um modelo 3D de maneira declarativa a uma página da Web, enquanto o modelo é hospedado
no seu próprio site. Ele não ofereceu suporte à realidade aumentada. Ou
seja, não é possível renderizar a imagem de origem do componente sobre o feed
da câmera de um dispositivo.
Para isso, adicionamos suporte ao Magic Leap e ao Quick Look no iOS. Agora,
estamos anunciando o suporte para RA no Android com a adição do atributo
ar
. Esse atributo é criado em um novo recurso do ARCore chamado Scene Viewer,
um app externo para visualização de modelos 3D. Para saber mais sobre o Scene Viewer,
consulte 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 requer conhecimento especial para usar. Ele se comporta como um elemento HTML padrão, com uma tag exclusiva, bem como propriedades e métodos. Depois de instalá-lo 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>
Isso é muito parecido com o que eu tinha no meu artigo anterior. Observe o que eu destaquei no final do slide. Esse é o novo atributo.
Como instalar a nova versão
Se você já usa <model-viewer>
, provavelmente está importando o componente
usando as tags <script>
exatamente
como mostrado na documentação.
Estamos sempre fazendo melhorias. Se você quiser testar novos recursos antes
de fazer upgrade e implantar deliberadamente, instale uma versão específica
de <model-viewer>
. Para fazer isso, adicione o número da versão aos URLs do arquivo, conforme mostrado abaixo. Em seguida, acesse
a página de versões
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 de <model-viewer>
e nos conte o que achou.
É possível receber problemas e feedback
no GitHub (em inglês).