Andrew Thorp

Photon - CSS 3D Lighting Engine

Tom Giannattasio authored a very powerful lighting engine using JavaScript and CSS3, and it is very easy to use – Photon. There are three basic concepts in Photon:

  • Photon.Light (A point in 3D space from which faces are lit)
  • Photon.Face (A DOM element to shade with a given light)
  • render (Tie a light and a face together)

A Quick Start, from the project’s website:

var light = new Photon.Light();
var face = new Photon.Face( $('.face-1')[0] );
face.render(light, true);

That’s it! Styling is handled with CSS, and you can setup as many face and light combinations as you want. There is even the concept of a Photon.FaceGroup, which makes shading multiple faces with a single light source dead easy.

Checkout the awesome examples or view the source on Github.


Sign in or Join to comment or subscribe

Player art
  0:00 / 0:00