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 
   

   View Slide

2. Login
   1. Verificar idioma
   2. Escolher “Other user”
   3. Username: alunos\uv
   4. Password: uv.2018##
   2
   1
   2
   3
   

   View Slide

3. Aceder à página http://aframe.io 3
   

   View Slide

4. Experimentar exemplo “WebVR”
   Experimentar no computador
   Teclas [W, A, S, D] ou setas para mover; clicar e arrastar rato para olhar.
   4
   

   View Slide

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”
   

   View Slide

6. Experimentar exemplo “360º Image” (2/2)
   3. Colocar o telemóvel nos óculos VR
   6
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. Criar um ambiente de RV (3/3)
   6. Editar código clicando em “index.html”
   7. Ver resultado clicando em “Show”
   9
   

   View Slide

10. Código
    representa a cena tridimensional
    , , , etc., são primitivas (objectos
    tridimensionais)
    Mais primitivas em https://aframe.io/docs/0.8.0/introduction/
    10
    

    View Slide

11. Código
    Uma primitiva tem atributos (os atributos variam com a primitiva):
    rotation="0 45 0"
    color="#4CC3D9"
    shadow>
    11
    

    View Slide

12. Primitivas
    Ver exemplos de outras primitivas em http://bit.ly/carva-refs
    12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. Adicionar uma foto 360º (2/3)
    5. Voltar a clicar em “index.html”
    6. Localizar a primitiva “”
    7. Adicionar o atributo src=”URL-AQUI” e colar o Url copiado anteriormente
    a seguir ao sinal de igual, dentro das aspas
    15
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. Adicionar animação (2/2)
    2. Adicionar o atributo “animation” ao objecto a animar
    3. Por exemplo, adicionar à :
    3.1 animation="property: rotation; to: 0 360 180; dur: 5000; loop: true"
    4. Ver o resultado
    18
    

    View Slide

19. View Slide

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

    View Slide