Image Gallery Threejs

Threejs based Gallery/Slider Plugin for JQuery. This was forked from djankey's "WebGL Carousel - Three.js" http://jsdo.it/djankey/carousel_webgl it didn't have jquery handling on it as well as better handling of controls for customization.

Required Libraries:

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

Browser Compatibility

• Firefox - 30.0.0 +
• Chrome - 35.0.0 +
• Explorer: 9 +
• Safari: not tested help test :)
• Mobile Chrome: not tested help test :)
• Mobile Safari: not tested help test :)

Demo

Example

<script>
$(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/'
    });
});
</script>

Options

Name	Type	Default	Description			Example
manifest	Array	Null	List of image paths			[ {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	String	Null	Path to the specific image listings
dx	Number	300	horizontal spacing of Images
dz	Number	300	Vertical spacing of Images
deltaRotation	Number	45	Degress Rotation of the non active images
planeSize	Number	500	Size of the active plane
alphaBackground	Boolean	true	Setting if the background is transparent
antialias	Boolean	true	Setting if the renderer processes the objects with antialias
progress
- light	Hex	"#ff0000"	Setting the color of the progress bar's light aspect
- ambientLight	Hex	"#ffffff"	Setting the color of the progress bar's ambient light aspect
- position	Array	[0,100,0]	Setting the position of the progress bar
stats	Boolean	false	sets if stats is shown or hidden.

Events

onImageLoadProgress	Image load progress
onImageLoadComplete	Image load complete
onImageLoad	Image load initialization
onNavigateComplete	Navigation Complete
	Parameters
	obj	active plane

Methods

Execution	Description
<object>.next();	Animates to the next scene
<object>.prev();	Animates to the previous scene
<object>.goTo(<index>);	Animates to the a specific scene
	Parameter
	index	Number	base zero position of the plane in an array.
	Example
	$(function(){     var box = $(".box").ig3js({         manifest: [             {src:"image1.jpg", id:"image1"},             {src:"image2.jpg", id:"image2"},             {src:"image3.jpg", id:"image3"},         ],         imagePath: 'images/',     });     box.navigate.goTo(2); });
<object>.perspective.default();	Sets the camera perspective default
<object>.perspective.topRight();	Sets the camera perspective top right
<object>.perspective.topLeft();	Sets the camera perspective top left