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.

47984b654bec549462b585cad0761c1f?s=128

Jorge C. S. Cardoso

July 03, 2018
Tweet

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