Aula 03 - Introdução ao AFRAME Framework

•

UNIP

Gustavo

21.07.2022

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 4, do total de 44 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 5, do total de 44 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 44 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 7, do total de 44 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 8, do total de 44 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 44 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 10, do total de 44 páginas

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Realidade Virtual

71 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Aula 03 – Introdução ao AFRAME 
Framework
UNIP - CIÊNCIA DA COMPUTAÇÃO
PROF. ME VICTOR RODRIGUES
Agenda
• Apresentação das ferramentas:
• AFRAME
• Three.js
• Babylon.js
• Desenvolvimento com AFRAME
• Primitivas
• Eventos Javascript
• Importação de modelos
O que é o AFRAME Framework?
• A-FRAME é um framework Web
para criação de experiências em
Realidade Virtual.
• Baseado em componentes para
three.js, onde trabalhamos de
forma declarativa (tags), junto com
o HTML.
• Entretando, é totalmente possível
extender as funcionalidades,
aproveitando toda a estrutura e
recursos que o Three.js e outras
bibliotecas Javascript.
O que é o Three.js?
• O Three.js é uma biblioteca 3D que utiliza, como padrão, o 
renderizador WebGL. 
• Permite criar e mostrar gráficos e animações 3D, com 
aceleração de GPU, em um navegador web. 
• Biblioteca mais popular e utilizada em Javascript para Jogos 
e Animações 3D (HTML 5).
Exemplos
• Exemplos Three.js:
• https://threejs.org/
• Exemplos 
• https://www.youtube.co
m/watch?v=pno1Xq4cPt
U
• https://aframe.io/exampl
es/showcase/gunters-of-
oasis/
• https://aframe.io/exampl
es
https://threejs.org/
https://www.youtube.com/watch?v=pno1Xq4cPtU
https://aframe.io/examples/showcase/gunters-of-oasis/
https://aframe.io/examples/showcase/gunters-of-oasis/
Babylon e WebGL
• Babylon
• Mecanismo 3D em tempo real que usa uma biblioteca 
JavaScript para exibir gráficos 3D em um navegador da web via 
HTML5.
• https://www.babylonjs.com/
• WebGL
• API em JavaScript, disponível a partir do novo elemento canvas
da HTML5, que oferece suporte para renderização de gráficos 
2D e gráficos 3D. 
https://www.babylonjs.com/
Babylon
https://www.youtube.com/
watch?v=m-YWBmim2Fo
https://www.youtube.com/watch?v=m-YWBmim2Fo
AFRAME: simulação de um servidor
• Antes de iniciarmos com a programação do AFRAME, é uma 
boa prática instalarmos uma ferramenta que permite a 
simulação de um servidor Web;
• Aplicações gráficas exigem bastante troca de informações 
entre cliente/servidor por conta dos modelos gráficos, 
texturas e interações;
• Podemos solucionar essa questão adicionando uma extensão 
para o Chrome chamada Web Server for Chrome.
Instalação Web Server for Chrome
https://chrome.google.com/webstore/detail/web-server-for-
chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related
Primeira aplicação 
no AFRAME!
• Vamos criar nosso primeiro modelo com 
AFRAME.
• Podemos também encontrar o Hello World da 
ferramenta no próprio site oficial:
https://aframe.io/docs/1.3.0/introduction/#getti
ng-started
Fonte: Kerfin7 (Link)
https://aframe.io/docs/1.3.0/introduction/#getting-started
https://br.freepik.com/psd-gratuitas/escolhendo-opcoes-com-vr-no-metaverso-ilustracao-3d_20113031.htm?query=realidade%20virtual
Primeira aplicação no AFRAME!
1. Após, vamos criar um novo arquivo HTML no projeto chamado
index.html.
2. Insira nele o código do próximo slide:
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"> 
</a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" 
color="#7BC8A4"> </a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Primitivas
• Existem diversos tipos de primitivas no 
AFRAME:
• Box (cubos, caixas, paredes...);
• Cones;
• Cilindros;
• Imagens e Textos;
• Planos;
• Triângulos;
• etc...;
https://aframe.io/docs/1.0.0/primitives/a-box.html
https://aframe.io/docs/1.0.0/primitives/a-box.html
Definindo propriedades básicas
• Todo objeto possui algumas propriedades básicas, como:
• ID
• Posição (position, define a translação de acordo com a origem);
• Rotação (rotate);
• Escala (width, height e depth);
• Cor (color).
• Na dúvida, a documentação traz todas as propriedades 
suportadas do objeto:
• Ex. https://aframe.io/docs/1.3.0/primitives/a-box.html
https://aframe.io/docs/1.3.0/primitives/a-box.html
Obs: Como descobrir as propriedades
Definindo propriedades básicas
• Dentro da tag <a-scene>, insira um box com as seguintes 
propriedades:
<a-box position="0 0 -1"
width="3"
heigth="2"
depth="7"
rotation="-30 45 10"
color="green"></a-box>
Texturas no objeto
• Podemos definir uma textura para o objeto. 
• Baixe uma imagem e coloque na pasta do projeto. Em seguida, altere o 
código conforme abaixo:
<a-assets>
<img id="texPig" src="porco.jpg">
</a-assets>
<a-box position="0 0 -1"
width=“2"
heigth="2"
depth=“2"
rotation="-30 45 10"
src="#texPig"></a-box>
Exercício
• Crie um cenário em A-FRAME, 
utilizando as primitivas 
básicas.
• Segue exemplo simples:
Entity-Component-System (ECS)
• Uma arquitetura ECS é um padrão de desenvolvimento de 
games que segue o princípio de hierarquia e herança.
• Possui três conceitos principais:
• Entidades: são containers em que os componentes podem ser 
anexados (como uma <div>)
• Components: são partes reutilizáveis e onde são definidas as 
características dos elementos.
• Sistemas é baseado no escopo global, onde tem a lógica sobre 
os componentes.
Entity-Component-System (ECS)
• Exemplo:
Entidades seriam cada opção de 
construção (<a-entity>).
Componentes: seriam as características 
de cada opção (atributos do <a-entity>).
Systems: seria o mecanismo de seleção 
da opção (<a-scene>).
<a-entity>
• Podemos representar qualquer objeto com a tag <a-entity>.
• O que definirá as características do objeto são os componentes 
(propriedades) que são colocadas nessa tag.
<a-sphere position="0 0.5 -1" radius="0.75" color="red"></a-sphere>
<a-entity geometry="primitive: sphere; radius: 0.75" position="0 0.5 -3" 
material="color: blue"></a-entity>
Alterando propriedades por 
Javascript
• Após entender que componentes são atributos de entidades, 
basta agora aprendermos como criar componentes 
customizados.
• Isso permitirá que novas funcionalidades e comportamentos 
sejam atribuídos a um objeto.
Estrutura básica de um componente
AFRAME.registerComponent('nomeComponente', {
schema: {type: 'string’}, // Tipo do parâmetro
init: function () {
// Dispara quando componente é inicializado
},
update: function () {
// Dispara quando algum valor for alterado
},
remove: function () {
// Dispara quando for removido
},
tick: function (time, timeDelta) {
// Dispara para cada frame
}
});
Registrando novos componentes
1. Crie um arquivo javascript chamado extensaoBox.js
2. Após, importe o script dentro do arquivo HTML:
<script src="extensaoBox.js"></script>
3. Agora escrever o código javascript. Vamos primeiro inserir 
no arquivo e depois trataremos das explicações:
AFRAME.registerComponent('cbrotate', {
schema: {type: 'string'},
init: function () {
// GET Atributos
console.log(this.data);
console.log(this.el.getAttribute('rotation'));
},
update: function () {
// Do something when component's data is updated.
},
remove: function () {
// Do something the component or its entity is detached.
},
tick: function (time, timeDelta) {
var rotate = this.el.getAttribute('rotation');
this.el.setAttribute('rotation', { x: rotate.x, y: rotate.y, z: rotate.z+1 })
}
});
Registrando novos componentes
4. Agora basta colocarmos nosso novo componente em nosso 
cubo (no HTML):
<a-box position="0 0 0“ rotation="0 0 0“ color="#4CC3D9“ 
cbrotate="Hello, Box!“></a-box>
5. Resultado:
Criando primitivas customizadas
• As primitivas são entidades com componentes pré-definidos.
• Da mesma forma dos componentes, podemos também criar 
nossas próprias primitivas.
// extendDeep possui os atributos e funções básicos para criar as primitivas
var extendDeep = AFRAME.utils.extendDeep;
// Propriedades default para materiaisvar meshMixin = AFRAME.primitives.getMeshMixin();
AFRAME.registerPrimitive('a-box2', extendDeep({}, meshMixin, {
defaultComponents: {
geometry: {primitive: 'box'}
},
// Mapeamentos de propriedades, com base nos valores padrão
mappings: {
depth: 'geometry.depth',
height: 'geometry.height',
width: 'geometry.width'
}
}));
Criando primitivas customizadas
• Após registrar primitivas, podemos utilizá-las normalmente, 
por meio das TAGS:
<a-box2 position="0 1 -4" rotation="0 45 0" color="#4CC3D9"></a-box2>
Importando 
objetos 
complexos
• Podemos importar 
objetos em formatos 
que tenham 
compatibilidade com o 
Three.js (PLY, FBX, 
JSON, etc.);
• Entretanto, é mais 
recomendado o uso 
dos formatos glFT ou 
OBJ.
https://aframe.io/aframe/examples/showcase/shopping/
https://aframe.io/aframe/examples/showcase/shopping/
Importando objetos complexos
▪ Recomendação de sites:
Clara.io
TurboSquid
▪ Outros:
Archive3D
Sketchfab
Sketchup’s 3D Warehouse
http://clara.io/
http://www.turbosquid.com/Search/3D-Models/free
http://archive3d.net/
https://sketchfab.com/
https://3dwarehouse.sketchup.com/
Importando objetos complexos
▪ Baixe o modelo abaixo (escolha o formato OBJ):
https://clara.io/view/790976e3-f99c-4f34-b475-f83fa14693b8
▪ Descompacte a pasta em seu proje-
to (veja imagem ao lado →)
https://clara.io/view/790976e3-f99c-4f34-b475-f83fa14693b8
Alterando o HTML
▪ Para utilizar o objeto em sua página, basta incluir os <a-assets> 
necessários e um <a-entity>:
<a-assets>
<a-asset-item id="mustang-obj" src="/objects/1967-shelby-ford-mustang-
obj/1967-shelby-ford-mustang.obj"></a-asset-item>
<a-asset-item id="mustang-mtl" src="/objects/1967-shelby-ford-mustang-
obj/1967-shelby-ford-mustang.mtl"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #mustang-obj; mtl: #mustang-mtl"></a-entity>
Obs: Importação objetos complexos
▪ Cada formato exige um tipo de importação:
▪ https://aframe.io/docs/1.0.0/components/gltf-model.html#why-use-gltf
▪ https://aframe.io/docs/1.0.0/components/obj-model.html
https://aframe.io/docs/1.0.0/components/gltf-model.html#why-use-gltf
https://aframe.io/docs/1.0.0/components/obj-model.html
Interações e Controles
• Como estamos trabalhando com uma biblioteca de RV, não 
existe uma forma padrão de interagirmos com o sistema .
• O AFRAME permite a interação com Mouse, Teclado, 
Oculos Rift, Sensores de Mão e diversos outros.
• Existem componentes de terceiros que estendem também 
essa interação.
• Para mais informações:
https://aframe.io/docs/1.3.0/introduction/interactions-and-
controllers.html#sidebar
https://aframe.io/docs/1.3.0/introduction/interactions-and-controllers.html#sidebar
Exemplo: Página
<body>
<a-scene stats>
<a-assets>
<img id="texture" src="grama.jpg">
</a-assets>
<a-box width="0.6" height="0.6" depth="0.6" position="-
1 0.5 -3" rotation="0 45 0" color="#4CC3D9" change-color-one></a-box>
<a-box width="0.6“ height="0.6" depth="0.6" position="0 
0.5 -3" rotation="0 0 0" color="#4CC3D9" change-color-all></a-box>
<a-box id="box3“ width="0.6“ height="0.6" depth="0.6“
position="1 0.5 -3" rotation="0 -45 0" color="#4CC3D9"></a-box>
<a-plane src="#texture" position="0 0 -4" rotation="-
90 0 0" width="4" height="4"></a-plane>
<a-camera><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
Exemplo: Página
Script: change-color-one
AFRAME.registerComponent('change-color-one', {
schema: {
color: {default: 'red'}
},
init: function () {
var data = this.data;
var el = this.el;
var defaultColor = this.el.getAttribute('material').color;
el.addEventListener('mouseenter', function () {
console.log(data.color);
el.setAttribute('color', data.color);
});
el.addEventListener('mouseleave', function () {
el.setAttribute('color', defaultColor);
});
}
});
Script: change-color-all (parte 1/2)
AFRAME.registerComponent('change-color-all', {
schema: {
color: {default: 'red'}
},
init: function () {
var data = this.data;
var el = this.el;
var defaultColor = this.el.getAttribute('material').color;
var cubes = el.sceneEl.querySelectorAll("a-box");
console.log(cubes);
el.addEventListener('mouseenter', function () {
for (var i = 0; i < cubes.length; i++)
cubes[i].setAttribute('color', data.color);
});
el.addEventListener('mouseleave', function () {
for (var i = 0; i < cubes.length; i++)
cubes[i].setAttribute('color', defaultColor);
});
Script: change-color-all (parte 2/2)
el.addEventListener('click', function () {
var c = el.sceneEl.querySelector("#box3");
c.setAttribute('color', 'green');
});
}
});
Resultado
QuerySelector
• Os métodos QuerySelector e QuerySelectorAll servem para 
recuperarmos as referências nas páginas
• Não podem ser utilizados no evento tick(), pois são lentos
• Podemos utilizar:
• TAGS: scene.querySelectorAll(‘a-box’)
• CLASS: scene.querySelectorAll(‘.estilo’)
• ATRIBUTOS/COMPONENTES: scene.querySelectorAll(‘[permirClick]’)
• ID: scene.querySelectorAll(‘#cbCubo’)
Referências
• Documentação AFRAME: https://aframe.io/
• Documentação ThreeJS: https://threejs.org/
https://aframe.io/
https://threejs.org/