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

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

Three.js：https://github.com/mrdoob/three.js/

Stats.js：https://github.com/mrdoob/stats.js/

TweenMax：http://www.greensock.com/gsap-js/

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>即可。

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

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

$(function(){
  $(".box").ig3js({
      manifest: [
          {src:"image1.jpg", id:"image1"},
          {src:"image2.jpg", id:"image2"},
          {src:"image3.jpg", id:"image3"},
          {src:"image4.jpg", id:"image4"},
          {src:"image5.jpg", id:"image5"},
          {src:"image6.jpg", id:"image6"},
          {src:"image7.jpg", id:"image7"}
        ],
        imagePath: 'images/'
    });
});

配置参数

名称 类型 默认值 描述
manifest Array Null 图片路径列表
imagePath String Null 指定图片所在路径
dx Number 300 图片的水平间距
dz Number 300 图片的垂直间距
deltaRotation Number 45 没有被激活的图片的旋转角度
planeSize Number 500 激活面板的宽度
alphaBackground Boolean true 设置背景是否透明
antialias Boolean true 抗锯齿设置
progress
light Hex "#ff0000" 设置进度条亮光面的颜色
ambientLight Hex "#ffffff" 设置进度条环境光的颜色
position Array [0,100,0] 设置进度条的位置
stats Boolean false 设置是隐藏还是显示

事件

名称 触发时机
onImageLoadProgress 调用图片的线程
onImageLoadComplete 图片加载完成
onImageLoad 图片开始加载
onNavigateComplete 导航结束。参数：激活的面板，类型为对象

方法

名称 描述
.next() 旋转木马旋转到下一图片
.prev() 旋转木马旋转到上一图片
<object>.goTo(<index>); 旋转木马旋转到指定的图片。参数：index，类型：Number。图片列表中元素的序号，从0开始计数
.perspective.defaul(); 设置旋转木马的3D透视为默认透视。
.perspective.topRight() 设置旋转木马的3D透视点在右边。
.perspective.topLeft() 设置旋转木马的3D透视点在左边。