基于Threejs的jQuery 3d图片旋转木马特效插件

一时失言乱红尘 2022-08-07 13:57 329阅读 0赞

这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载，带有前后导航按钮，可以使用鼠标前后旋转，并可以设置3D透视的位置。

[![1118249p0p8zejzd3idi0n.png][]][1118249p0p8zejzd3idi0n.png]

[查看演示][Link 1]   [在线下载][Link 2]  [201504091855.zip][]

该旋转木马依赖于以下外部插件：

*  Three.js：[https://github.com/mrdoob/three.js/][https_github.com_mrdoob_three.js]
 *  Stats.js：[https://github.com/mrdoob/stats.js/][https_github.com_mrdoob_stats.js]
 *  TweenMax：[http://www.greensock.com/gsap-js/][http_www.greensock.com_gsap-js]
 *  PreloadJS：[http://www.createjs.com/\#!/PreloadJS][http_www.createjs.com_PreloadJS]

浏览器兼容

*  Firefox - 30.0.0 +
 *  Chrome - 35.0.0 +
 *  Explorer: 9 +
 *  Ipad Safari: 7.0.0 +
 *  Iphone Safari: 7.0.0 +
 *  IOS Safari: 7.0.0 +
 *  Android Chrome: 未测试
 *  IOS Chrome: 未测试

使用方法  
HTML结构  
  
该旋转木马插件的HTML结构使用一个空的<div>即可。

1.  <div class="box"></div>

复制代码

在调用插件之前要引入所有的外部依赖文件。然后可以使用下面的方法调用该旋转木马插件：

1.  $(function()\{  
    
2.    $(".box").ig3js(\{  
    
3.        manifest: \[  
    
4.            \{src:"image1.jpg", id:"image1"\},  
    
5.            \{src:"image2.jpg", id:"image2"\},  
    
6.            \{src:"image3.jpg", id:"image3"\},  
    
7.            \{src:"image4.jpg", id:"image4"\},  
    
8.            \{src:"image5.jpg", id:"image5"\},  
    
9.            \{src:"image6.jpg", id:"image6"\},  
    
10.           \{src:"image7.jpg", id:"image7"\}  
    
11.         \],  
    
12.         imagePath: 'images/'  
    
13.     \});  
    
14. \});

复制代码

配置参数

[![1117217gg209b800003kq3.png][]][1117217gg209b800003kq3.png]

事件

[![111657av7z7f59849xax9t.png][]][111657av7z7f59849xax9t.png]

方法

[![1116357fb07kflkfbii74k.png][]][1116357fb07kflkfbii74k.png]

via:[http://www.htmleaf.com/jQuery/Sl ... r/201504091651.html][http_www.htmleaf.com_jQuery_Sl ... r_201504091651.html]

[1118249p0p8zejzd3idi0n.png]: http://www.html5cn.org/data/attachment/forum/201504/13/1118249p0p8zejzd3idi0n.png
[Link 1]: http://www.htmleaf.com/Demo/201504091652.html
[Link 2]: http://down.htmleaf.com/1504/201504091855.zip
[201504091855.zip]: http://www.html5cn.org/portal.php?mod=attachment&id=14906
[https_github.com_mrdoob_three.js]: https://github.com/mrdoob/three.js/
[https_github.com_mrdoob_stats.js]: https://github.com/mrdoob/stats.js/
[http_www.greensock.com_gsap-js]: http://www.greensock.com/gsap-js/
[http_www.createjs.com_PreloadJS]: http://www.createjs.com/#!/PreloadJS
[1117217gg209b800003kq3.png]: http://www.html5cn.org/data/attachment/forum/201504/13/1117217gg209b800003kq3.png
[111657av7z7f59849xax9t.png]: http://www.html5cn.org/data/attachment/forum/201504/13/111657av7z7f59849xax9t.png
[1116357fb07kflkfbii74k.png]: http://www.html5cn.org/data/attachment/forum/201504/13/1116357fb07kflkfbii74k.png
[http_www.htmleaf.com_jQuery_Sl ... r_201504091651.html]: http://www.htmleaf.com/jQuery/Slideshow-Scroller/201504091651.html