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. Works well on IOS ipad and iphone aswell ad desktop PCS.

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 +
Ipad Safari: 7.0.0 +
Iphone Safari: 7.0.0 +
IOS Safari: 7.0.0 +
Android Chrome: not tested help test :)
IOS Chrome: 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> <div class="box"></div>

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

planeSizeW	Number	500	Size of the plane Width
planeSizeH	Number	500	Size of the plane Height

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.

canvasWindow	canvas	sets canvas size
`</td> <td> defaultWidth </td> <td> Integer </td> <td colspan=4> 500 </td> </tr> <tr> <td> </td> <td> defaultHeight </td> <td> Integer </td> <td colspan=4> 500 </td> </tr>`

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 = $.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

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