蔬菜土豆泥（@蔬菜土豆泥）

Photon.js是一个JavaScript库，在三维空间中的DOM元素添加简单的照明效果。
效果图：
光照开启效果

光照关闭效果

快速开始

官网：http://photon.attasi.com/index.html

创建一个灯光

该光对象表示一点在三维空间中，模型表面被点亮。
// 创建一个光源点 x: 0, y: 0, z: 100

var light = new Photon.Light();

定义一个面

Face对象指定哪个DOM原因应该被阴影或照亮。

// 使用最大投影 .5 创建face
var face = new Photon.Face( $('.face-1')[0] );

RENDER

应用render方法，基于创建的light(光)投影或照亮创建的face(面)。

// 它与光的关系
face.render(light, true);

参考

Light

//创建一个Light对象，默认位置直指视图。
Photon.Light( x = 0, y = 0, z = 100 )

//将光移动到一个新的坐标系中。
moveTo( x, y, z )

FACE

//创建一个新的Face对象，默认，每个元素(element)都会被微投影。
Photon.Face( element, maxShade = .5, maxTint = 0, isBackfaced = false )

//方法，相对于Light对象的角度让元素阴影或变亮。这些渲染应用在元素中含有photon-shader这个类名的空div上。
render( light, getNewRotations, parentRotations )

//设置最大阴影值:0 - 1。
setMaxShade( value )

//设置最大色彩值:0 - 1。
setMaxTint( value )

FACEGROUP

//创建一个新的FaceGroup对象，允许一次应用渲染多个面。其也计算嵌套元素的角度（如父元素旋转了，里面元素的角度会根据这个字段计算调整）。
Photon.FaceGroup( parent, faces, maxShade = .5, maxTint = 0, isBackfaced = false )

//方法，相对于Light对象的角度让元素阴影或变亮。这些渲染应用在元素中含有photon-shader这个类名的空div上。
render( light, getNewGroupRotations, getNewFaceRotations )

//设置最大阴影值:0 - 1。
setMaxShade( value )

//设置最大色彩值:0 - 1。
setMaxTint( value )