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. 1.

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

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

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

    D] ou setas para mover; clicar e arrastar rato para olhar. 4
  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”
  5. 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
  6. 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
  7. 9.

    Criar um ambiente de RV (3/3) 6. Editar código clicando

    em “index.html” 7. Ver resultado clicando em “Show” 9
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 19.
  17. 20.

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

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