Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jessica Travieso - WebVR, The Open Web Virtual Reality

188 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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/

×