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.

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
20. Criação de Ambientes de Realidade Virtual usando A-Frame Jorge C. S. Cardoso | http://jorgecardoso.eu | jorgecardoso@ieee.org