model viewer

O model-viewer da Google

A Web (veja mais aqui) está a evoluir ritmos alucinantes. E a Google está a ajudar bastante.
Se deseja exibir modelos 3D com algumas anotações e até com animações, pode fazê-lo com o model-viewer. É um componente Web optimizado para mostrar modelos 3D e pode ser usado de várias maneiras e suporta a nossa querida tecnologia de realidade aumentada. 🥰

Inserir o modelo 3D

Actualmente, suporta os formatos de modelo 3D .gltf e .glb. Para este exemplo, já temos nosso modelo .glb, por isso vamos mergulhar já no código.
Crie um novo ficheiro chamado index.html e comece por escrever as tags básicas do documento HTML e mova o seu modelo 3D para a mesma pasta onde se encontra o ficheiro que criámos. Em seguida, dentro da secção <head>, copie e cole estas linhas que nos incorporam a biblioteca necessária:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script><script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

Em seguida, dentro da tag <body>, podemos incorporar o nosso modelo 3D assim:

<model-viewer camera-controls src="assets/Dotesfera3D.glb"
alt="A simple 3D model">

Depois disto, abra o seu index.html no browser e deverá ver o modelo 3D. Repare como já pode girar e aumentar/diminuir o zoom devido ao atributo camera-controls.
Por vezes, queremos fornecer mais informações sobre o modelo. Podemos fazer isso com Hotspots. Vamos adicionar um <button> com alguns atributos personalizados que o model-viewer interpretará como informação:

<button slot=”hotspot” data-position=”0.13m 0.018m 0.31m”> <div id=”annotation”>This is the nucleus</div></button>

No código acima, usamos o atributo data-position para dizer onde o ponto de informação será posicionado no modelo 3D. As coordenadas (x, y, z) são mostradas em metros devido à escala do nosso modelo de exemplo. Também usamos o atributo slot, saiba mais aqui.
Também podemos adicionar uma skybox ao nosso visualizador usando o atributo skybox-image:

<model-viewer camera-controls src="assets/Dotesfera3D.glb"
alt="A simple 3D model" skybox-image="./photo.jpg">

E até agora este é o nosso resultado:

Mas não é só isto! Se adicionarmos o atributo ar e ar-modes=”webxr” ao nosso código:

<model-viewer camera-controls src="assets/Dotesfera3D.glb"
alt="A simple 3D model" skybox-image="./photo.jpg"
ar ar-modes="wexr">

E se abrir o seu projecto num smartphone, poderá ver uma funcionalidade especial onde poderá ver o modelo 3D posicionado no mundo real numa escala real com realidade aumentada (também compatível com Magic Leap e Quick Look no iOS). Basta clicar no botão:

model viewer
Botão de modo AR

O que acha?

Start typing and press Enter to search