O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Jessica Travieso - WebVR, The Open Web Virtual Reality

191 visualizações

Publicada em

Jessica Travieso presenta la importancia del WebVR en nuestro segundo evento de MeetUp de la comunidad Realidad Virtual Valencia.

http://www.meetup.com/es-ES/Realidad-Virtual-Valencia

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Jessica Travieso - WebVR, The Open Web Virtual Reality

  1. 1. awwwards.com
  2. 2. ¿Qué es WebVR?01/
  3. 3. Problemáticas02/
  4. 4. ¿Cómo empezar?03/
  5. 5. http://aframe.io
  6. 6. Demos04/
  7. 7. <body> <a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a- cylinder> <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body>
  8. 8. <html> <head> <meta charset="utf-8"> <title>Panorama</title> <meta name="description" content="Panorama — A-Frame"> <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky> </a-scene> </body> </html>
  9. 9. .... <a-scene> <a-entity position="0 1.8 4"> <a-camera id="camera"> <a-cursor color="#4CC3D9"></a-cursor> </a-camera> </a-entity> <a-box id="yellow-cube" position="0 3.5 -2" rotation="30 30 0" width="2" depth="2" height="2" color="#F16745" roughness="0.8"> <a-event name="cursor-mouseenter" scale="3 1 1" color="#FFC65D"></a-event> <a-event name="cursor-mouseleave" scale="1 1 1" color="#F16745"></a-event> </a-box> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
  10. 10. Ejemplo Three.js
  11. 11. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 35, // Field of view 800 / 600, // Aspect ratio 0.1, // Near plane 10000 // Far plane ); camera.position.set( -15, 10, 10 ); camera.lookAt( scene.position ); var geometry = new THREE.BoxGeometry( 5, 5, 5 ); var material = new THREE.MeshLambertMaterial( { color: 0xFF0000 } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh );
  12. 12. Descargas: http://bit.ly/26ZG3fi 05/

×