文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>JavaScript 图片3D展示空间(3DRoom)

JavaScript 图片3D展示空间(3DRoom)

时间:2010-09-24  来源:cloudgamer

一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。
程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。
很久以前就看过一个3DRoom效果,是用复杂的计算实现的。
在上一篇图片变换研究过css3的transform之后,就想到一个更简单的方法来实现。





在线效果预览

完整实例下载

程序说明

【实现原理】

3D效果的关键,是深度的实现。
把3D容器看成一个由多个不同深度的层组成的空间,这些层的尺寸默认跟容器一样。
层里面放了该深度的图片,并且各个层会根据深度的变化做缩放变换,从视觉上产生深度差。
缩放变换的比例按照最近点为1,最远点为0,逐渐变化。
关键的地方是层里面图片的尺寸和坐标必须跟着层同时变换,这个通过css3的transform很简单就能实现。
这样图片只需设置好尺寸再相对层定好位就行了,避免了随深度变化要不断调整图片尺寸和定位的麻烦。


【图片加载】

在程序初始化之后,就可以调用add方法来添加图片。
add方法有两个参数:图片地址和参数对象,还会返回一个图片操作对象。
操作对象包含以下属性和方法,方便对图片进行操作:
img: 图片元素
src: 图片地址
options: 参数对象
show: 显示图片方法
remove: 移除图片方法
其中options可以设置如下属性:
属性:    默认值//说明
x:              0,//水平位移
y:              0,//垂直位移
z:              0,//深度
width:       0,//宽度
     0,//高度
scaleW:       1,//宽度缩放比例
scaleH:       1//高度缩放比例
其中x、y分别是水平和垂直坐标的位移参数,坐标原点在容器底部中间,水平坐标向右,纵坐标向上,单位是px。
而z是深度,用于比例的计算,方向由近点到原点。
坐标系如下图:

相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载