当前位置：首页 > 资讯 > 技术文档

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

时间：2022-12-22 00:15 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript实现的图片3D展示空间(3DRoom)

程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。很久以前就看过一个[url=http://www.dhteumeuleu.com/mandatory-upgrade/]3DRoom[/url]效果，是用复杂的计算实现的。在上一篇[url=http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html]图片变换[/url]研究过css3的transform之后，就想到一个更简单的方法来实现。兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 [img]http://files.jb51.net/upload/201010/20101011140451599.gif[/img] 3DRoom [img]http://files.jb51.net/upload/201010/20101011140510804.gif[/img] [b]程序说明[/b] [b]【实现原理】[/b] 3D效果的关键，是深度的实现。把3D容器看成一个由多个不同深度的层组成的空间，这些层的尺寸默认跟容器一样。层里面放了该深度的图片，并且各个层会根据深度的变化做缩放变换，从视觉上产生深度差。缩放变换的比例按照最近点为1，最远点为0，逐渐变化。关键的地方是层里面图片的尺寸和坐标必须跟着层同时变换，这个通过css3的transform很简单就能实现。这样图片只需设置好尺寸再相对层定好位就行了，避免了随深度变化要不断调整图片尺寸和定位的麻烦。 [b]【图片加载】[/b] 在程序初始化之后，就可以调用add方法来添加图片。 add方法有两个参数：图片地址和参数对象，还会返回一个图片操作对象。操作对象包含以下属性和方法，方便对图片进行操作： img: 图片元素 src: 图片地址 options: 参数对象 show: 显示图片方法 remove: 移除图片方法其中options可以设置如下属性：属性: 默认值//说明 x: 0,//水平位移 y: 0,//垂直位移 z: 0,//深度 width: 0,//宽度 height: 0,//高度 scaleW: 1,//宽度缩放比例 scaleH: 1//高度缩放比例其中x、y分别是水平和垂直坐标的位移参数，坐标原点在容器底部中间，水平坐标向右，纵坐标向上，单位是px。而z是深度，用于比例的计算，方向由近点到原点。坐标系如下图： [img]http://files.jb51.net/upload/201010/20101011141503949.gif[/img] 图片加载成功后，就会执行_load图片加载程序。首先根据参数设置图片样式：

[url=http://www.dhteumeuleu.com/mandatory-upgrade/]3DRoom[/url]那样平稳。研究代码后发现，原来它用的公式是这样的：

this.r = FL / (FL + (z * Z));

其中FL和Z是一个常量来的，即公式可表示成：

function(z){ return 1/(1+z/常量); }

那按照这个公式，深度为0时比例为1，深度为常量时比例为0.5，深度为无穷大时比例为0。变化效果可以参考下面程序：

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

可以看出，缩放比例在默认公式是均匀变化的，而3DRoom公式是先快后慢，而且是逐渐变慢，所以有那种平稳的感觉。那按照实际，还可以自己设计适合的公式，只要符合在1到0之间变化就行。 [b]【css3模式】[/b] 程序中有三种缩放变换方式：css3、zoom和base，模式的程序结构跟上一篇类似。缩放变换的目的是根据传递过来的比例和位置偏移量，把缩放效果显示出来，实现最终的3D效果。 css3模式使用的是css3的transform，在上一篇已经介绍过用transform的matrix做缩放和旋转，这次还需要后面两个参数做位置变换。后面两个参数要注意单位的设置，在MDC的[url=https://developer.mozilla.org/en/CSS/-moz-transform]-moz-transform[/url]有说明： Gecko (Firefox) accepts a <length> value for tx and ty. Safari (WebKit) and Opera currently support a unitless <number> for tx and ty. 意思是位移参数tx和ty，在Firefox需要带单位，而WebKit和Opera只需要数字（不带单位，默认px）。程序会根据浏览器设置单位。使用css3模式，还可以通过修改_r弧度属性进行旋转。最后设置matrix实现变换：

[url=http://www.w3.org/TR/WD-positioning-970131#]zIndex[/url]来实现，可以在图片或层上设置。首先最简单的方法是在层上设置：

[url=http://www.dhteumeuleu.com/mandatory-upgrade/]3DRoom[/url]却不会卡，最后发现是使用了-ms-interpolation-mode。这个东西在[url=http://www.aoao.org.cn/blog/2009/03/img-ms-interpolation-mode/]aoao[/url]的文章中看过，但没想到可以用在这里。在MSDN有[url=http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx]msInterpolationMode[/url]的介绍： Gets or sets the interpolation (resampling) method used to stretch images. 即获取或设置用于拉伸图像的插值（重采样）方法。它有两个值： nearest-neighbor：使用近邻插值模式。 bicubic：使用高品质的双三次插值模式。这些名词比较专业，我们只要知道使用nearest-neighbor效率高但效果差，而bicubic效果好效率低就够了。程序把它设为nearest-neighbor提高效率，这样在ie8中也不会卡了。 [b]【拖动方向变换/滚轮深度变换】[/b] 程序扩展了拖动视觉变换和滚轮深度变换。拖动和滚动的做法跟上一个的做法差不多，这里拖动是实现方向的变换，滚轮是实现深度的变换。移动是通过修改_x和_y属性来实现，缩放是通过修改_z来实现。修改属性之后再调用show方法显示效果。 [b]使用技巧[/b] [b]【3DRoom】[/b] 在3DRoom效果中，因为要实现图片的触发事件，所以不能用css3模式，原因是上面提到的层叠问题。上面也提到在ie8被zoom的元素尺寸不会改变，导致触发范围错误，所以也不用zoom模式。使用base模式就不会有问题了。在点击图片时，视觉会移动到图片上面，这个通过点击图片后根据本身的三维参数修改_x/_y/_z来实现：

img.onclick = function(){ i3D._z = -options.z | 0; i3D._x = -options.x | 0; i3D._y = options.y | 0; i3D.show(); }

图片在mouseover时会显示一个边框，为了让图片加边框后不发生位移，加了一个"-1px"的margin，mouseout时再去掉。这里3DRoom跟参考的效果还是有差距，本文主要还是对3D效果的实现和研究。 [b]【模式选择】[/b] css3模式稳定，大部分浏览器都支持，除了ie。 zoom模式兼容性不好，但ie支持。 base最慢，但兼容性好，而且没有bug。一般情况下应优先使用css3模式，然后是zoom，最后base，但像3DRoom那样的情况就要按实际选择了。设计的时候，ie是打算用Matrix滤镜的，但开发中发现一些问题，效率又太低，就不考虑了。 [b]使用说明[/b] 实例化时，必须有容器作为参数：

var i3D = new Image3D( container, options );

然后调用i3D方法添加图片：

i3D.add( src, options );

可选参数用来设置系统的默认属性，包括：属性: 默认值//说明 mode: "css3|zoom|base",//模式 x: 0,//水平偏移值 y: 0,//垂直偏移值 z: 0,//深度偏移值 r: 0,//旋转角度(css3支持) fixedFar: false,//是否远点固定 getScale: function(z){ return 1 - z / 1000; },//获取比例方法 onError: function(err){}//出错时执行 add方法的可选参数在图片加载中已经说明。还提供了以下方法： add：添加图片； show：显示效果； reset：重置默认状态； dispose：销毁程序。加入拖动方向变换或滚轮深度变换扩展后，可通过设置相关参数定义变换范围。打包下载地址 [url=http://demo.jb51.net/js/Image3D/index.htm]http://demo.jb51.net/js/Image3D/index.htm[/url] 演示地址 [url=http://xiazai.jb51.net/201010/yuanma/Image3D.rar]/201010/yuanma/Image3D.rar[/url]

全部评论(0)

上一篇：百度留言本js 大家可以参考下
下一篇：基于HTML5+JS实现本地图片裁剪并上传功能

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部