-
Be the first to like this
Upcoming SlideShare
Jessica Travieso - WebVR, The Open Web Virtual Reality
- 1. awwwards.com
- 2. ¿Qué es WebVR?01/
- 3. Problemáticas02/
- 4. ¿Cómo empezar?03/
- 5. http://aframe.io
- 6. Demos04/
- 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. <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. .... <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. Ejemplo Three.js
- 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. Descargas: http://bit.ly/26ZG3fi 05/
Be the first to comment