Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys - Universidade de Verão 2019
Slides for the Summer University 2019 - University of Coimbra, about using A-Frame for creating a Web-based VR experience. This year, I'm using Cubecraft images to show how to recreate the 3D Cubecraft figures.
Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys Jorge C. S. Cardoso | http://jorgecardoso.eu | [email protected] Universidade de Verão 2019 25 Julho 2019
A-Frame http://aframe.io Usar Google Chrome ou Firefox ou Safari (actualizados) Abrir site Framework para criação de conteúdos de Realidade Virtual para a Web Conteúdos são visualizados através de um browser Conteúdos são criados numa linguagem baseada em HTML 2 http://aframe.io
Ambiente de desenvolvimento (1/2) 1. Abrir a página https://repl.it/@jorgecard oso/aframe-uv2019 2. Clicar no botão “fork” no topo da janela 3. Fazer “refresh” da página 3. Clicar no botão “Open in a new tab” no lado direito da janela 4
Exemplo 1 7 Conteúdo VR definido com elementos HTML próprios do A-Frame. Conteúdo é composto por uma cena 3D com objectos 3D no interior e uma câmara que define a perspectiva do utilizador.
Exemplo 1 8 cria uma “caixa” -- paralelepípedo. Width, height, e depth definem as dimensões (em metros). Position é a posição no “mundo” tridimensional.
Eixos 3D ● A unidade de distância em A-Frame é o metro ● O utilizador tem os pés em (0, 0, 0) ● A cabeça está em (0, 1.6, 0) ○ 1.6 metros é uma altura média ● Está a olhar no sentido negativo do eixo Z 11 X Y Z
Rotação 3D ● Unidade: graus ● Para saber o sentido de uma rotação use a regra das mãos ○ Polegar no sentido positivo do eixo sobre o qual queremos rodar o objecto ○ Mão fecha no sentido positivo da rotação 17 Rotação em X Rotação em Y Rotação em Z
Exemplo 2 - Texturas 18 definem recursos (imagens) a serem usadas no mundo 3D. Cada imagem tem um identificador único. O atributo “multisrc” permite-nos indicar qual a imagem que vai ser usada para texturizar cada face da caixa. Para identificar as imagens usamos os identificadores que definimos nos assets prefixados por #. As texturas têm de ser dadas nesta ordem de faces: direita, esquerda, topo, baixo, frente, trás.
Exemplo 3 - Animação 20 O atributo “animation” permite-nos alterar os valores de outras propriedades do objecto ao longo do tempo. É necessário definir: - property: que propriedade queremos modificar - from: qual o valor inicial - to: qual o valor final - dur: qual a duração da animação - dir: se queremos uma animação “trás->frente->trás” - loop: se queremos uma animação infinita
Exemplo 4 - Hierarquia 22 As hierarquias de objectos (objectos dentro de objectos) permitem-nos controlar facilmente tudo o que está dentro da hierarquia.
Exemplo final - tudo junto 25 Imagens para todas as partes do corpo. Para mudar de personagem, basta alterar o número da personagem, em todas as linhas. Também podem misturar partes de personagens diferentes!
Exemplo final - tudo junto 27 O boneco está hierarquizado: boneco1 - representa todo o boneco, para ser fácil reposicioná-lo corpo-superior - representa a parte de cima do corpo (cabeça, ombros, braços e tronco
Links úteis ● Curso sobre A-Frame ○ https://aframe-uc.glitch.me/index.html ● Lista de objectos 3d simples ○ https://aframe-uc.glitch.me/viewsource/examples/0 1-basics-05-primitives.html 29
jorgecardoso
utokyoissr2360
toarukanshiin
pylapp
amarelo_n24
signer
skimatalk
rmcelreath
cbtlibrary
matleenalaakso
aki_iinuma
garrettdimon
mza
scottboms
jonrohan
kneath
paulrobertlloyd
geoffreycrofte
davidbonilla
paigeccino
tanoku
jennybc