O documento apresenta como criar ambientes de realidade virtual usando o framework A-Frame. Explica como experimentar exemplos simples no computador e no smartphone e como criar uma cena 360o interativa com objetos 3D. Inclui código de exemplo e informações sobre eixos e rotação 3D, e desafia a criar uma nova cena personalizada.

1. Criação de Ambientes
de Realidade Virtual
usando A-Frame
Escola Secundária D. Inês de Castro 23 Abril 2019
Jorge C. S. Cardoso | http://jorgecardoso.eu | jorgecardoso@dei.uc.pt

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. 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”
4
Botão “modo VR”
Procurar exemplo
“360º Image”

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

6. Ambiente RV
360º interactivo
(1/2)
1. Abrir a página
https://aframe-alcobaca.glitch.me
2. Clicar no botão do canto superior
direito
3. Clicar no botão “Remix on Glitch”
6

7. Ambiente RV
360º interactivo
(2/2)
4. Ver resultado clicando em “Show
Live” - Experimentar no PC /
Smartphone
5. Editar clicando num ficheiro HTML
do lado esquerdo e editando no lado
direito
6. (Se quiser pode fazer “Sign in” no
botão do canto superior direito, para
manter as suas alterações guardadas)
7. Ficheiro README.md contém mais
algumas indicações de referência
7

8. Código
8
Inclusão das bibliotecas A-Frame que vão interpretar o conteúdo.

9. Código
9
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.

10. Código
10
<a-sky> é na verdade uma esfera com 5 km de raio. O atributo “src” define a imagem
equirectangular (foto 360º) aplicada como textura. Ver pasta “assets” no projecto para outras
imagens.

11. Código
11
<a-link> para “navegarmos” entre mundos VR. O elemento dentro do <a-link> é o objecto 3D visível
para o utilizador para activar o link.

12. Código
12
<a-plane>: Rectângulo para definir um alvo invisível quando o utilizador “olha” para o edifício.
O segundo <a-plane> define o fundo verde para o texto. Eventos “mouseenter” e “mouseleave”
funcionam de forma semelhante ao “hover” em CSS.

13. Código
13
<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.

14. 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
14
X
Y
Z

15. 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
15
Rotação em X
Rotação em Y
Rotação em Z

16. Desafio
Criar uma nova cena 360º
1. Criar um novo ficheiro html
2. Copiar o conteúdo do
ficheiro “alcobaca-2.html”
3. Modificar a foto 360º:
a. Escolher uma foto dos
assets
b. Copiar o URL
c. Colar no “src” do <a-sky>
4. Modificar o link do
“index.html” para apontar
para o ficheiro criado
5. Ajustar o link do ficheiro
criado para voltar ao
“index.html”
16

17. Adicionar uma
imagem aos
assets
1. Procurar uma foto 360 no Google e
descarregar para o PC (se quiser criar
uma foto 360 a partir do Google Street
View veja o ficheiro README.md no
projecto)
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”
5. Voltar a clicar em “index.html”
6. Localizar a primitiva “<a-sky>”
7. Modificar o atributo “src”, colando o
Url copiado anteriormente
17

18. Inspector
visual do
A-Frame
Na janela com a visualização da cena
pressionar as teclas Control + Alt + i
Do lado esquerdo aparece a estrutura
de elementos da cena
Clicando num elemento vemos do lado
direito as suas propriedades
Podemos fazer deslocar, rodar e
aumentar ou diminuir os objectos
(Os valores das propriedades têm de
ser copiados de volta para o HTML,
caso contrário perdem-se)
Para voltar à visualização normal,
clicar no botão “Back to Scene"
18

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