Criação de Ambientes de Realidade Virtual usando A-Frame - Escola Avelar Brotero

Slides for the workshop on creating VR with A-Frame at the Avelar Brotero high school.

Transcript

1. 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 | jorgecardoso@dei.uc.pt 
   

   View Slide

2. 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
   

   View Slide

3. Experimentar
   exemplo
   “WebVR”
   Experimentar no computador
   ● Teclas [W, A, S, D] ou setas para
   mover;
   ● Clicar e arrastar rato para olhar.
   3
   

   View Slide

4. Experimentar
   exemplo “360º
   Image” (1/2)
   1. Abrir página https://aframe.io no
   browser do telemóvel
   2. Rodar e carregar no botão de “modo
   VR”
   4
   Botão “modo VR”
   Procurar exemplo
   “360º Image”
   

   View Slide

5. Experimentar
   exemplo “360º
   Image” (2/2)
   3. Colocar o telemóvel nos óculos VR
   5
   

   View Slide

6. 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
   

   View Slide

7. 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
   

   View Slide

8. Código
   8
   Inclusão das bibliotecas A-Frame que vão interpretar o conteúdo.
   

   View Slide

9. 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.
   

   View Slide

10. 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.
    

    View Slide

11. Código
    11
    para “navegarmos” entre mundos VR.
    

    View Slide

12. Código
    12
    define a perspectiva do utilizador. coloca um cursor circular no centro do
    ecrã para dar ao utilizador uma forma de apontar.
    

    View Slide

13. 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
    

    View Slide

14. 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
    

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

17. 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
    

    View Slide