O realístico mundo do WebVR com A-Frame

View Github Repository Open presentation in a new window

brunolimawd

See all presentation from brunolimawd

O realístico mundo do WebVR com A-Frame

0 0

talk-mozvr-aframe

On Github brunolimawd / talk-mozvr-aframe

O realístico mundo do WebVR com A-Frame

Bruno Lima

  • Front-end Developer @ CESAR
  • Mozillian
  • NodeBots Recife

VR

Virtual Reality

[Realidade Virtual]

Stanley G. Weinbaum

Pygmalion's Spectacles, 1935

30's

60's

Morton Heilig

Sensorama, 1962

90's

Virtual Boy

?

WebVR

MozVR

A-Frame

Instalando

						https://aframe.io/releases/0.2.0/aframe.min.js

$ npm install aframe

Hello World

						<a-scene>
  <a-box color="#cccccc" width="5" height="5" depth="5"></a-box>
</a-scene>
				
						<!doctype html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box color="#cccccc" width="2" height="2" depth="2"></a-box>
    </a-scene>
  </body>
</html>

Controles

						<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E">
  </a-sphere>
  <a-cube width="1" height="1" depth="1" color="#4CC3D9">
  </a-cube>
  <a-cylinder radius="0.5" height="1.5" color="#FFC65D">
  </a-cylinder>
  <a-plane width="4" height="4" color="#7BC8A4">
  </a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

360˚

						<a-scene>
	<a-sky src="foto.jpg"></a-sky>
</a-scene>

http://bit.ly/jsdaycg360

Mais detalhes

#FEMUGPE

#WebVR #MozVR

Obrigado!

#WebVR

#MozVR

O realístico mundo do WebVR com A-Frame