Criação de Ambientes de Realidade Virtual usando A-Frame - Escola Avelar Brotero Escola Secundária Avelar Brotero 21 Janeiro 2020 Jorge C. S. Cardoso | http://jorgecardoso.eu | [email protected]
A-Frame http://aframe.io Usar Google Chrome ou Firefox ou Safari (actualizados) Abrir site Framework para criação de conteúdos de Realidade Virtual para a Web Conteúdos são visualizados através de um browser Conteúdos são criados numa linguagem baseada em HTML 2 http://aframe.io
Ambiente RV 360º interactivo (1/2) 1. Abrir a página https://aframe-brotero.glitch.me 2. Clicar no botão do canto superior direito 3. Clicar no botão “Remix on Glitch” 6
Ambiente RV 360º interactivo (2/2) 4. Ver resultado clicando em “Show -> In a New Window” - Experimentar no PC / Smartphone 5. Editar clicando num ficheiro HTML do lado esquerdo e editando no lado direito 6. (Se quiser pode fazer “Sign in” no botão do canto superior direito, para manter as suas alterações guardadas) 7. Ficheiro README.md contém mais algumas indicações de referência 7
Código 9 Conteúdo VR definido com elementos HTML próprios do A-Frame. Conteúdo é composto por uma cena 3D com objectos 3D no interior e uma câmara que define a perspectiva do utilizador.
Código 10 é na verdade uma esfera com 5 km de raio. O atributo “src” define a imagem equirectangular (foto 360º) aplicada como textura. Ver pasta “assets” no projecto para outras imagens.
Eixos 3D ● A unidade de distância em A-Frame é o metro ● O utilizador tem os pés em (0, 0, 0) ● A cabeça está em (0, 1.6, 0) ○ 1.6 metros é uma altura média ● Está a olhar no sentido negativo do eixo Z 13 X Y Z
Rotação 3D ● Unidade: graus ● Para saber o sentido de uma rotação use a regra das mãos ○ Polegar no sentido positivo do eixo sobre o qual queremos rodar o objecto ○ Mão fecha no sentido positivo da rotação 14 Rotação em X Rotação em Y Rotação em Z
Adicionar uma imagem aos assets 1. Procurar uma foto 360 no Google e descarregar para o PC (se quiser criar uma foto 360 a partir do Google Street View veja o ficheiro README.md no projecto) 2. No projecto, clicar em “Assets” 3. Arrastar a foto do PC para o ecrã Assets 4. Depois do upload, clicar na foto e depois no botão “Copy Url” 5. Voltar a clicar em “index.html” 6. Localizar a primitiva “” 7. Modificar o atributo “src”, colando o Url copiado anteriormente 15
Inspector visual do A-Frame Na janela com a visualização da cena pressionar as teclas Control + Alt + i Do lado esquerdo aparece a estrutura de elementos da cena Clicando num elemento vemos do lado direito as suas propriedades Podemos fazer deslocar, rodar e aumentar ou diminuir os objectos (Os valores das propriedades têm de ser copiados de volta para o HTML, caso contrário perdem-se) Para voltar à visualização normal, clicar no botão “Back to Scene" 16
Links úteis ● Curso sobre A-Frame ○ https://aframe-uc.glitch.me/index.html ● Lista de objectos 3d simples ○ https://aframe-uc.glitch.me/viewsource/examples/0 1-basics-05-primitives.html 17