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

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

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

Apresentação para a Universidade de Verão (Universidade de Coimbra) sobre a Framework A-Frame para criação de ambientes de realidade virtual.

Jorge C. S. Cardoso

July 03, 2018
Tweet

More Decks by Jorge C. S. Cardoso

Other Decks in Education

Transcript

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

    S. Cardoso | http://jorgecardoso.eu | jorgecardoso@ieee.org 
  2. Login 1. Verificar idioma 2. Escolher “Other user” 3. Username:

    alunos\uv 4. Password: uv.2018## 2 1 2 3
  3. Aceder à página http://aframe.io 3

  4. Experimentar exemplo “WebVR” Experimentar no computador Teclas [W, A, S,

    D] ou setas para mover; clicar e arrastar rato para olhar. 4
  5. 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” 5 Botão “modo VR” Procurar exemplo “360º Image”
  6. Experimentar exemplo “360º Image” (2/2) 3. Colocar o telemóvel nos

    óculos VR 6
  7. Criar um ambiente de RV (1/3) 1. Voltar à página

    https://aframe.io 2. Clicar no botão “Get Started” 3. Na página seguinte clicar em “remix the starter example on Glitch” 7
  8. Criar um ambiente de RV (2/3) 4. Clicar no botão

    “View Source” 5. Na página seguinte clicar em “Remix This” 8
  9. Criar um ambiente de RV (3/3) 6. Editar código clicando

    em “index.html” 7. Ver resultado clicando em “Show” 9
  10. Código <a-scene> representa a cena tridimensional <a-box>, <a-sphere>, <a-cylinder>, etc.,

    são primitivas (objectos tridimensionais) Mais primitivas em https://aframe.io/docs/0.8.0/introduction/ 10
  11. Código Uma primitiva tem atributos (os atributos variam com a

    primitiva): <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> 11
  12. Primitivas Ver exemplos de outras primitivas em http://bit.ly/carva-refs 12

  13. Cores Atributos que definem cores aceitam valores em hexadecimal Para

    obter códigos de cor ver ferramenta em http://bit.ly/carva-refs 13
  14. Adicionar uma foto 360º (1/3) 1. Escolher a foto 360º

    em http://bit.ly/carva-refs e descarregar para o PC 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” 14
  15. Adicionar uma foto 360º (2/3) 5. Voltar a clicar em

    “index.html” 6. Localizar a primitiva “<a-sky>” 7. Adicionar o atributo src=”URL-AQUI” e colar o Url copiado anteriormente a seguir ao sinal de igual, dentro das aspas 15
  16. Adicionar uma foto 360º (3/3) 8. Visualizar primeiro no PC

    para confirmar que está a funcionar 9. Testar no telemóvel/óculos RV 16
  17. Adicionar animação (1/2) 1. Adicionar o código “script para animação”

    que se encontra em http://bit.ly/carva-refs (deve ser adicionado a seguir ao script existente) 17
  18. Adicionar animação (2/2) 2. Adicionar o atributo “animation” ao objecto

    a animar 3. Por exemplo, adicionar à <a-box>: 3.1 animation="property: rotation; to: 0 360 180; dur: 5000; loop: true" 4. Ver o resultado 18
  19. None
  20. Criação de Ambientes de Realidade Virtual usando A-Frame Jorge C.

    S. Cardoso | http://jorgecardoso.eu | jorgecardoso@ieee.org