3D Rotating Carousel Plugin with jQuery and three.js - Image Gallery Threejs

Image Gallery Threejs is a jQuery & three.js based 3D rotating carousel/slider that allows you to cycle through an array of images with familiar cover flow effects.

How to use it:

1. Include jQuery, three.js, jQuery image gallery threejs plugin and other necessary dependencies in the document.

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="js/assets.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/PreloadJS/0.3.1/preloadjs.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

2. Create an empty container where you wish to display the 3D rotating carousel/slider.

<div class="carousel"></div>

3. Call the plugin on the container you just created and insert your images into the carousel using JS array object.

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

4. Available options to customize the 3D rotating carousel.

dx: 300, // horizontal spacing of Images
dz: 300, // Vertical spacing of Images
deltaRotation: 45, // Degress Rotation of the non active images
planeSizeW: 500,
planeSizeH: 500,
manifest: [], // List of image paths
imagePath: '', // Path to the specific image listings
alphaBackground: true, // Setting if the background is transparent
antialias: true, // Setting if the renderer processes the objects with antialias
progress: { 
    light: "#ff0000",
    ambientLight: "#ffffff",
    position: [0, 100, 0]
},

// callbacks
onImageLoadProgress: null,
onImageLoadComplete: null,
onImageLoad: null,
onNavigateComplete: null,
stats: false,
canvasWindow: {
  defaultWidth: window.innerWidth,
  defaultHeight: window.innerHeight
}

Changelog:

2021-06-16

• update three.js.
• bugfix

2016-04-28

• added parameter for panelSize Height and Width
• revised panelSize Property so you can adjust the shape

2015-09-24

• updated styling

2015-09-22

• update a lot

---

This awesome jQuery plugin is developed by blockhead123. For more Advanced Usages, please check the demo page or visit the official website.