Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys - Universidade de Verão 2019

Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys - Universidade de Verão 2019

Slides for the Summer University 2019 - University of Coimbra, about using A-Frame for creating a Web-based VR experience. This year, I'm using Cubecraft images to show how to recreate the 3D Cubecraft figures.

Jorge C. S. Cardoso

July 25, 2019
Tweet

More Decks by Jorge C. S. Cardoso

Other Decks in Education

Transcript

  1. Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft

    Toys Jorge C. S. Cardoso | http://jorgecardoso.eu | jorgecardoso@dei.uc.pt Universidade de Verão 2019 25 Julho 2019
  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
  3. Experimentar exemplo “WebVR” Experimentar no computador • Teclas [W, A,

    S, D] ou setas para mover; • Clicar e arrastar rato para olhar. 3
  4. Ambiente de desenvolvimento (1/2) 1. Abrir a página https://repl.it/@jorgecard oso/aframe-uv2019

    2. Clicar no botão “fork” no topo da janela 3. Fazer “refresh” da página 3. Clicar no botão “Open in a new tab” no lado direito da janela 4
  5. Ambiente de desenvolvimento (2/2) 4. Seleccionar ficheiros do lado esquerdo

    5. Editar no meio 6. Ver o resultado no 2º tab (fazendo refresh) 5
  6. Exemplo 1 6 Inclusão das bibliotecas A-Frame que vão interpretar

    o conteúdo.
  7. Exemplo 1 7 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.
  8. Exemplo 1 8 <a-box> cria uma “caixa” -- paralelepípedo. Width,

    height, e depth definem as dimensões (em metros). Position é a posição no “mundo” tridimensional.
  9. Exemplo 1 9 Cria automaticamente um “ambiente” com objectos espalhados

    pelo chão.
  10. Exemplo 1 10 <a-camera> define a perspectiva do utilizador. <a-cursor>

    coloca um cursor circular no centro do ecrã para dar ao utilizador uma forma de apontar.
  11. 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 11 X Y Z
  12. Exemplo 1 12 Y X 0

  13. Exemplo 1 13 0.08 (8 cm) 0.16 (16 cm)

  14. Exemplo 1 14 0.16 (16 cm) 0.32 (32 cm) 0.16

    (16 cm) 0.32 (32 cm)
  15. Desafio Criar e posicionar os braços (no ficheiro exemplo1.html). Dimensões

    da caixa: width="0.12" depth="0.12" height="0.24" 15
  16. Exemplo 1 16 Y X 0 0.12 0.24 ?

  17. 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 17 Rotação em X Rotação em Y Rotação em Z
  18. Exemplo 2 - Texturas 18 <a-assets> definem recursos (imagens) a

    serem usadas no mundo 3D. Cada imagem tem um identificador único. O atributo “multisrc” permite-nos indicar qual a imagem que vai ser usada para texturizar cada face da caixa. Para identificar as imagens usamos os identificadores que definimos nos assets prefixados por #. As texturas têm de ser dadas nesta ordem de faces: direita, esquerda, topo, baixo, frente, trás.
  19. Desafio Texturizar o braço direito. No ficheiro exemplo2.html, os assets

    para o braço direito já foram carregados. 19
  20. Exemplo 3 - Animação 20 O atributo “animation” permite-nos alterar

    os valores de outras propriedades do objecto ao longo do tempo. É necessário definir: - property: que propriedade queremos modificar - from: qual o valor inicial - to: qual o valor final - dur: qual a duração da animação - dir: se queremos uma animação “trás->frente->trás” - loop: se queremos uma animação infinita
  21. Desafio Animar um braço 21

  22. Exemplo 4 - Hierarquia 22 As hierarquias de objectos (objectos

    dentro de objectos) permitem-nos controlar facilmente tudo o que está dentro da hierarquia.
  23. Exemplo 4 - Hierarquia 23 0.16 0.32 0.12/2 = 0.06

    0.32 /2 = 0.16 Y X
  24. Exemplo 4 - Hierarquia 24 Y X 0.12

  25. Exemplo final - tudo junto 25 Imagens para todas as

    partes do corpo. Para mudar de personagem, basta alterar o número da personagem, em todas as linhas. Também podem misturar partes de personagens diferentes!
  26. Exemplo final - tudo junto 26

  27. Exemplo final - tudo junto 27 O boneco está hierarquizado:

    boneco1 - representa todo o boneco, para ser fácil reposicioná-lo corpo-superior - representa a parte de cima do corpo (cabeça, ombros, braços e tronco
  28. Desafio Criar novas poses Aplicar texturas de outros personagens Duplicar

    o boneco 28
  29. 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 29