O documento apresenta uma introdução ao framework A-Frame para criação de ambientes de realidade virtual na web. É explicado como criar objetos 3D e cenas simples usando marcação HTML, adicionar texturas, animações e estruturas hierárquicas. Exemplos demonstram como posicionar e animar "cubos" para formar um boneco e são dados desafios para estender o exemplo.

1. Criação de Ambientes
de Realidade Virtual
usando A-Frame - CubeCraft
Toys
Jorge C. S. Cardoso | http://jorgecardoso.eu | jorgecardoso@dei.uc.pt
Universidade de Verão 2019 25 Julho 2019

2. 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

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

4. 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

5. Ambiente de
desenvolvimento
(2/2)
4. Seleccionar ficheiros
do lado esquerdo
5. Editar no meio
6. Ver o resultado no 2º
tab (fazendo refresh)
5

6. Exemplo 1
6
Inclusão das bibliotecas A-Frame que vão interpretar o conteúdo.

7. 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.

8. Exemplo 1
8
<a-box> cria uma “caixa” -- paralelepípedo. Width, height, e
depth definem as dimensões (em metros). Position é a
posição no “mundo” tridimensional.

9. Exemplo 1
9
Cria automaticamente um “ambiente” com objectos
espalhados pelo chão.

10. Exemplo 1
10
<a-camera> define a perspectiva do utilizador. <a-cursor>
coloca um cursor circular no centro do ecrã para dar ao
utilizador uma forma de apontar.

11. 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

12. Exemplo 1
12
Y
X0

13. Exemplo 1
13
0.08 (8 cm)
0.16 (16 cm)

14. Exemplo 1
14
0.16 (16 cm)
0.32 (32 cm)
0.16 (16 cm)
0.32 (32 cm)

15. Desafio
Criar e posicionar os braços (no
ficheiro exemplo1.html).
Dimensões da caixa:
width="0.12"
depth="0.12"
height="0.24"
15

16. Exemplo 1
16
Y
X0
0.12
0.24
?

17. 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

18. Exemplo 2 - Texturas
18
<a-assets> 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.

19. Desafio
Texturizar o braço direito.
No ficheiro exemplo2.html, os
assets para o braço direito já
foram carregados.
19

20. 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

21. Desafio Animar um braço
21

22. Exemplo 4 - Hierarquia
22
As hierarquias de objectos (objectos dentro de objectos)
permitem-nos controlar facilmente tudo o que está dentro
da hierarquia.

23. Exemplo 4 - Hierarquia
23
0.16
0.32
0.12/2 = 0.06
0.32 /2 =
0.16
Y
X

24. Exemplo 4 - Hierarquia
24
Y
X
0.12

25. 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!

26. Exemplo final - tudo junto
26

27. 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

28. Desafio
Criar novas poses
Aplicar texturas de outros
personagens
Duplicar o boneco
28

29. 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