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.

47984b654bec549462b585cad0761c1f?s=128

Jorge C. S. Cardoso

July 25, 2019
Tweet

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