Photon--CSS 3D光照引擎

Photon--CSS 3D光照引擎
作者:夜飞羽 来源:mxria.com  时间:2012-08-30

 Photon是一个JavaScript库,可以为3D DOM元素制作简单的光影效果。Photon基于WebKitCSSMatrix 实现,所以仅支持WebKit浏览器(即:Chrome、Safari等,不支持IE)。 Photon是processor-intensive,它并不会过于占处理器资源,所以你可以放心地使用它而不必太担心CPU占用率过高。相比OpenGL之类专业3D库,Photon目前的功能还是比较简单,但对于页面应用的开发已经足够了,大家都习惯称之为CSS 3D光照引擎。利用它,你可以用Javascript代码实现很多光照阴影效果,从而展示出绚丽的3D效果。

Photon 3D光照引擎

 

欢迎前往官方网站了解详细情况,这里是详细的使用说明。源代码已经托管在GitHub上,也可以点击这里单独下载JavaScript文件。

使用方式也比较简单:

先定义光源,光源位置采用x,y,z三个维度在网页范围内设置。

	 var  light=new Photon.Light(); // 默认是x=0,y=0,z=100

也可以使用构造器的形式 Photon.Light( x = 0, y = 0, z = 100 )

然后选择相应的DOM对象进行渲染

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

转载于:https://www.cnblogs.com/mxria/archive/2012/09/04/2670506.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值