$30 off During Our Annual Pro Sale. View Details »

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. Criação de Ambientes
    de Realidade Virtual
    usando A-Frame
    Jorge C. S. Cardoso | http://jorgecardoso.eu | [email protected]

    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 | [email protected]

    View Slide