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. Experimentar exemplo “WebVR” Experimentar no computador Teclas [W, A, S,

    D] ou setas para mover; clicar e arrastar rato para olhar. 4
  2. 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”
  3. 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
  4. Criar um ambiente de RV (2/3) 4. Clicar no botão

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

    em “index.html” 7. Ver resultado clicando em “Show” 9
  6. 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
  7. 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
  8. Cores Atributos que definem cores aceitam valores em hexadecimal Para

    obter códigos de cor ver ferramenta em http://bit.ly/carva-refs 13
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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