Continuación ¿Cómo se hizo WW?

Peter

Hablemos un poco de Peter, el personaje me recuerda al que aparece en el antiguo juego de Pc Alone in the Dark I (posiblemente es debido al low poly).

Para que rotara en dirección hacia un objeto (mirando a un objeto).

obj.lookAt( hlp.position );

Donde obj es el objeto que va a mirar hacia la posición del objeto target que pasamos por parámetro, en este caso "hlp" es la posición a donde deseamos que "obj" apunte.

Para la rotación de Peter sea relativa a la rotación de otro objeto, posiblemente hay múltiples formas de lograr esto, independientemente de las funciones que puedan existir para lograr esa acción se utilizó:

ax = new THREE.Vector3(0, 0, -1); 
scene.getObjectByName("peter").quaternion.setFromUnitVectors(ax, new THREE.Vector3(vx, vy, vz).clone().normalize() );

Para obtener el vector de Peter y dibujar una línea donde apunta, se utilizó peter_h el cual es un helper oculto que siempre está en ángulo recto frente a Peter:

function vect () {
		   var vx = scene.getObjectByName("peter").position.x-scene.getObjectByName("peter_h").position.x;
		   var vy = scene.getObjectByName("peter").position.y-scene.getObjectByName("peter_h").position.y;
		   var vz = scene.getObjectByName("peter").position.z-scene.getObjectByName("peter_h").position.z;

			//alert (vx + " " + vy + " " + vz);			
			
var vertices=[[scene.getObjectByName("peter").position.x,scene.getObjectByName("peter").position.y,scene.getObjectByName("peter").position.z],[scene.getObjectByName("peter_h").position.x,scene.getObjectByName("peter_h").position.y,scene.getObjectByName("peter_h").position.z]];

var long_vertices=vertices.length;
Geometria=new THREE.Geometry();

for(i=0;i < long_vertices;i++){
    x=vertices[i][0];
    y=vertices[i][1];
    z=vertices[i][2];
    //Agregamos vértices al vector
    Vector=new THREE.Vector3(x,y,z);
    //Agregamos el vector a la geometría
    Geometria.vertices.push(Vector);   
    }
// agregamos un material para que la línea tenga color
Material=new THREE.ParticleBasicMaterial({color:0XFF0000});
// creamos una línea con la geometría y el material
Figura=new THREE.Line(Geometria,Material);
// agregamos la línea al escenario
scene.add(Figura);

	ax = new THREE.Vector3(0, 0, -1); 
	scene.getObjectByName("peter").quaternion.setFromUnitVectors(ax, new THREE.Vector3(vx, vy, vz).clone().normalize() );

}



animar.js

Para mantener la misma velocidad en cada trayecto se utilizó la fórmula "distancia entre dos puntos en 3 dimensiones".

Se calcula la distancia considerando el vector diferencia entre dos puntos (vector1)-(vector2):

(4,5,6) - (1,2,3) = (4-1,5-2 ,6-3 )= (3, 3, 3)

Luego la norma Euclideana de dicho vector osea la raiz de la suma de los cuadrados cada componente del vector difeferencia:

distancia(x,y) = raiz( (3^2)+(3^2)+(3^2) )

=5.19

Lo cual se resume en:

function calcular_distancia (x1,y1,z1,x2,y2,z2){
	var sub1= x1-x2;
	var sub2= y1-y2;
	var sub3= z1-z2;
	var pw1= sub1*sub1;
	var pw2= sub2*sub2;
	var pw3= sub3*sub3;
	var sum= pw1 + pw2 + pw3;
	var tot= Math.sqrt(sum).toFixed(2);
	return tot;
}		 
Y luego al tener la distancia una regla de 3 para mantener la velocidad del siguiente trayecto, por ejemplo: si el trayecto1 a velocidad 3000 tiene 1400 de distancia, el trayecto2 con 2500 de distancia que velocidad tiene?
dist2= calcular_distancia (posx,posy,posz,obj.position.x,obj.position.y,obj.position.z);
tiempo= obtener_tiempo_animacion (dist1,tme,dist2);



Sonidos y Música

La forma más simple que hay es utilizando las ventajas de Html5 mediante la etiqueta <audio>

 

				
Luego, en el lugar que desee reproducir el sonido agregar:
 
					document.getElementById ('s_sel1').play();
				

Otras maneras de incluir sonido es utilizando librerías en código Javascript:

Buzz!

Es una pequeña y completa librería JS que aprovecha las capacidades de HTML para cargar y manejar archivos de sonido, soporta la mayoría de los formatos (mp3, ogg, etc) y funciona en varios web browsers modernos. Liberado bajo licencia MIT. Sitio web Buzz!

Thunder.js

Es una librería que apunta a facilitar la reproducción y creación de sonidos; funciona en cualquier navegador que soporte el tag

SoundJS

Su objetivo es facilitar el trabajo con archivos de sonido. Liberado bajo licencia MIT. Sitio web SoundJS

Moosound

Plugin para el framework javascript Mootools que añade soporte para el manejo de archivos de sonido, requiere MooTools versión 1.2. Sitio web Moosound

timbre.js

Librería que permite programación de sonidos orientada a objetos, liberado bajo licencia MIT. Sitio web timbre.js

JPlayer

Plugin para Jquery open source, licencia MIT/GPL, multiplataforma con soporte para los formatos de sonido más populares. Sitio web JPlayer

SoundManager 2

Esta librería cuenta con soporte para HTML5, liberada bajo licencia BSD, con apenas 11kb de tamaño. Sitio web SoundManager 2

Dancer.js

Librería de alto nivel para manejo de audio, soporta Mozilla Audio Data API y Webkit Web Audio API, perfecto para crear visualizaciones. Sitio web Dancer.js

TONE.JS

Github Tone.js

Entre otras librerías que pueden existir y estén en desarrollo...

Para incluir los archivos Midi

Está la opción de utilizar la librería de Javascript MIDI.js, en vez de utilizar esta librería lo que hice fue pasar las canciones de MIDI a MP3 con el programa Format Factory.




A la final se lo dediqué a mi hermano Christian por su cumpleaños colocando un detalle particular. El proyecto estuvo listo en un mes.

Recomiendo este juego para android en 2d ( Instincts ), creado por Christian Leiva.