La escena y la cámara

Clase 10 de 44 • Curso de Realidad Virtual para Web 2017

Alan Martínez Zapata

student•

Entonces si queremos generalizar para diferentes gafas tendriamos que agregar los controles de cada uno de ellos y el aframe identificara automaticamente cual de estos controles emplear dependiendo del dispositivo que se este usando?

Belen Ceballos

student•

Aframe tiene uno genérico pero después si querés usar particularidades de cada plataforma podés utilizando esto:
Como dice ahí, después podés usar el de cada plataforma, hay vive, oculus y daydream controles. Se entiende?

Juan Puerta Montoya

student•

podemos tener más de una cámara en una misma escena?, si es así como cambiar dinámicamente entre cámaras

Belen Ceballos

student•

Como poder se puede, pero en general no es conveniente. Puede provocar motion sickness, pero además cambiando la posición de la misma cámara podés lograr el mismo efecto que buscas.
A-scene tiene el método setActiveCamera con el que podrías hacer algo así.
Pero recuerda, cuánto más naturales sean los movimientos, mejor la experiencia del usuario.

jhiasmani chavez diaz

student•

hola siguiendo los ejemplos no me funciona el wasd-control…el codigo es:

<a-scene>
	<a-sphere position="0 1.25 -5" radius="1.25"  color="#EF2D5E"></a-sphere>
	<a-box position="-1 0.5 -3" rotation="0 45 0"  width="1" height="1" depth="1" color="#4cc3d9" >
	</a-box>
			
	<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#ffc65d">
	</a-cylinder>
			
	<a-plane position="0 0 -4" rotation="-90 0 0"   width="4" height="4" color="#7bc8a4">   
	</a-plane>
			
    <a-entity id="cameraman" position="-2 0 2" 
       wasd-controls="false">
	  <a-camera></a-camera>
	   <a-animation attribute="position" from="-2 2 2"  to="0 0 0"  dur="3000" begin="1000" >
	</a-animation> 					  	
 </a-entity>
		<a-sky color="#ececec"></a-sky>
</a-scene>	```

Vic Rivas

student•

Hola amig@, el principal problema es que tienes que dejar espacio entre el nombre de las etiquetas y sus atributos!
Por ejemplo <a-box position>
Mira asi te funcionara:

<html>
  <head>
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  </head>
  <body>
 <a-scene>
	<a-sphere position="0 1.25 -5"radius="1.25"color="#EF2D5E"></a-sphere>
	<a-box position="-1 0.5 -3" rotation="0 45 0"width="1"height="1" depth="1"color="#4cc3d9">
	</a-box>
	<a-cylinder position="1 0.75 -3"radius="0.5"height="1.5"color="#ffc65d">
	</a-cylinder>
	<a-plane position="0 0 -4" rotation="-90 0 0"width="4"height="4"color="#7bc8a4">   
	</a-plane>
	<a-entity id="cameraman"position="-2 0 2" 
       wasd-controls="false">
	  <a-camera></a-camera>
	   <a-animation attribute="position" from="-2 2 2"  to="0 0 0"  dur="3000" begin="1000" >
	</a-animation> 					  	
 </a-entity>
		<a-sky color="#ececec"></a-sky>
</a-scene>
  </body>
</html>```

jhiasmani chavez diaz

student•

deje espacio pasa que cuando pegas el codigo aca sale cualquier cosa…y sigue sin funcionar wasd-controls

Daniel Arevalo

student•

Ja Genial 😄 se ve super bien
Dejo el codigo que hace el efecto 😄

 <a-entity id="camera" position=" 0 1 2" >
            <a-camera></a-camera >
            <a-animation  attribute = "position" direction = "alternate-reverse" from ="0 0 50" to = "0 0 0" repeat = "indefinite">
            </a-animation>
        </a-entity>

gregory yepez

student•

Por que cuando quiero poner una imagen mía como entorno nunca sale nada que sera?

Yeraldine Martinez

student•

No olvidar que nos puede resultar útil el atributo **stats ** en la etiqueta <a-scene> para monitorear diferentes estadísticas de la escena que estamos creando.

Daniel Pereira Perez

student•

Este seria el código de la camara para alternar entre acerarse y alejarse

<a-entity id="cameraman" position="0 0 3" >
    <a-camera wasd-controls-enabled="false"></a-camera>
    <a-animation attribute="position" from="0 0 3" to="0 0 0" dur="2500" begin="1000" repeat="indefinite" direction="alternate" ></a-animation>
</a-entity>

Andres Felipe Jaramillo Gonzalez

student•

Hola, y si deseo que la cámara suba y baje con una tecla como lo programaría ?

<a-scene>
	<a-sphere position="0 1.25 -5" radius="1.25"  color="#EF2D5E"></a-sphere>
	<a-box position="-1 0.5 -3" rotation="0 45 0"  width="1" height="1" depth="1" color="#4cc3d9" >
	</a-box>
			
	<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#ffc65d">
	</a-cylinder>
			
	<a-plane position="0 0 -4" rotation="-90 0 0"   width="4" height="4" color="#7bc8a4">   
	</a-plane>
			
    <a-entity id="cameraman" position="-2 0 2" 
       wasd-controls="false">
	  <a-camera></a-camera>
	   <a-animation attribute="position" from="-2 2 2"  to="0 0 0"  dur="3000" begin="1000" >
	</a-animation> 					  	
 </a-entity>
		<a-sky color="#ececec"></a-sky>
</a-scene>	```

<html>
  <head>
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  </head>
  <body>
 <a-scene>
	<a-sphere position="0 1.25 -5"radius="1.25"color="#EF2D5E"></a-sphere>
	<a-box position="-1 0.5 -3" rotation="0 45 0"width="1"height="1" depth="1"color="#4cc3d9">
	</a-box>
	<a-cylinder position="1 0.75 -3"radius="0.5"height="1.5"color="#ffc65d">
	</a-cylinder>
	<a-plane position="0 0 -4" rotation="-90 0 0"width="4"height="4"color="#7bc8a4">   
	</a-plane>
	<a-entity id="cameraman"position="-2 0 2" 
       wasd-controls="false">
	  <a-camera></a-camera>
	   <a-animation attribute="position" from="-2 2 2"  to="0 0 0"  dur="3000" begin="1000" >
	</a-animation> 					  	
 </a-entity>
		<a-sky color="#ececec"></a-sky>
</a-scene>
  </body>
</html>```

 <a-entity id="camera" position=" 0 1 2" >
            <a-camera></a-camera >
            <a-animation  attribute = "position" direction = "alternate-reverse" from ="0 0 50" to = "0 0 0" repeat = "indefinite">
            </a-animation>
        </a-entity>

<a-entity id="cameraman" position="0 0 3" >
    <a-camera wasd-controls-enabled="false"></a-camera>
    <a-animation attribute="position" from="0 0 3" to="0 0 0" dur="2500" begin="1000" repeat="indefinite" direction="alternate" ></a-animation>
</a-entity>

La escena y la cámara

Introducción

Bienvenidos al curso

Por qué VR en la web

El estado del arte de WebVR

El estándar WebVR

El mundo en 3 dimensiones

A-Frame

Introducción al Framework (A-Frame)

Cómo funciona A-Frame (Entity-Component System)

Primeros pasos con A-Frame

Primitivas

La escena y la cámara

Modificando componentes

Animaciones y texto

Assets

Imágenes

3D Models

Vídeos y audio

Configuraciones avanzadas en A-Frame

Manejo de eventos

El cursor y su uso

Manejo de eventos

Primer proyecto: Tour Virtual

Introducción al primer proyecto

Creando el guión y recabando assets

La primera vista del proyecto

Cambios de vista en el proyecto

Deploy del proyecto

Controles

Tipos de controles

Componentes externos

Showcase de componentes y cómo usar

Ejemplo de Charts con 3D

Física

Introducción a física en 3D

Utilizando librerías

Colisiones

Segundo proyecto: Búsqueda del tesoro

Introducción al segundo proyecto

Creando el entorno del juego

Agregar física al proyecto

Creando el laberinto del juego

Agregando muros en el juego

Agregando los premios y el ganador

Agregando interactividad en el juego

Deploy con Git

Comandos de voz

Speech Recognition API

Comandos de voz en A-Frame

Cierre del curso

Desafíos

Creando una ciudad

Utilizar el API de moviedb

Usando la cámara para arrastrar un balón