Mapas 360
Para esta clase, vamos a hacer algo muy similar a Google Street View, es un ejercicio corto, pero divertido en términos un poco mas técnicos, vamos a poner la foto de una vista panorámica de 360 grados a una esfera. Debemos descargar el archivo que contiene el html y el script:
Poner la imagen en la Esfera Como ya vimos en clases anteriores, vamos a crear una variable (linea 1) y luego cargamos la foto que hayamos elegido (línea 5). Luego se aplica la textura a la esfera (linea 13).
Rotando la esfera con el Mouse
Las líneas 11 y 12 se están usando para rotar la esfera, y el tamaño de la misma ahora es 1000, o sea que la cámara 3D está en el interior de la esfera.
Objetos
Ahora vamos a poner otra imagen y aplicaremos la textura a ese objeto. Para este ejemplo busqué la imagen de una pelota para mapearla en esta esfera de tamaño 200 (línea 22).Usé una estructura push()/pop() y dentro de ella va la esfera, y sus transformaciones para "aislarla" de la esfera que tiene el mapa de fondo.
También declaré la variable posición (en la línea 13), y uso el contenido de la misma para la posición de uno de los ejes (eje Y) de la pelota. De tal manera que ésta se moverá si algo le pasa a ese valor.
Función Trigonométrica Seno
Para este ejemplo podemos usar Seno o Coseno, e invocar esas funciones con sin() o cos() respectivamente, entre paréntesis va el valor que deseamos usar.En la línea 19, se guarda en posición el resultado del seno de frameCount/100, y a eso lo multiplicamos por 100.
la Variable frameCount tiene dentro el número de veces que el navegador redibuja la vista, y ese número se incremente muy rápido, lo dividimos por 100 para que el resultado de la función haga mover la pelota de forma un poco mas lenta, al resultado lo multiplicamos por 100 ya que cualquier resultado de la función Seno o Coseno estará entre 1 y -1, de tal manera, podemos AMPLIFICAR el rango con una multiplicación.
