Photon es una biblioteca JavaScript para agregar efectos de luces a elementos representados en 3D. Para realizar este trabajo utiliza las propiedades CSS más modernas, lo que ahorra considerables recursos.
Esta pequeña y potente biblioteca funciona perfectamente en los navegadores modernos, no obstante el autor de la misma recomienda utilizarla con mucha precaución ya que hace un uso bastante importante de procesador.
Les recomiendo visitar la demostración online, en donde podrán ver una grulla animada en 3D, la misma que se puede ver en la captura de esta entrada.
Ejemplo de uso de Photon
Photon es sorprendentemente fácil de utilizar. Eso no quiere decir que realizar un objeto en 3D sea sencillo, sin embargo si ya tenemos nuestro objeto diseñado agregarle las distintas luces es muy sencillo. Para eso simplemente debemos seguir algunos pasos:
Crear un foco de luz:
// Crea una luz en las coordenadas x: 0, y: 0, z: 100 var light = new Photon.Light();
Iluminar la cara de un elemento:
var face = new Photon.Face( $('.face-1')[0] );
En la documentación del proyecto pueden ver algunos ejemplos más.
Web: Photon
