$30 off During Our Annual Pro Sale. View Details »

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

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.

Jorge C. S. Cardoso

January 21, 2020
Tweet

More Decks by Jorge C. S. Cardoso

Other Decks in Education

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 | [email protected]

    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