jessica travieso - webvr, the open web virtual reality
TRANSCRIPT
awwwards.com
¿Qué es WebVR?01/
Problemáticas02/
¿Cómo empezar?03/
http://aframe.io
Demos04/
<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>
<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>
....
<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>
Ejemplo Three.js
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 );
Descargas:http://bit.ly/26ZG3fi
05/
