├── .gitignore ├── Gruntfile.js ├── README.md ├── dist ├── css │ ├── image-gallery-three.min.css │ └── style.min.css ├── images │ ├── github.png │ ├── image1.jpg │ ├── image2.jpg │ ├── image3.jpg │ ├── image4.jpg │ ├── image5.jpg │ ├── image6.jpg │ └── image7.jpg ├── index.html └── js │ ├── assets.min.js │ └── image-gallery-three.min.js ├── package.json └── src ├── css ├── image-gallery-three.css └── style.css ├── images ├── github.png ├── image1.jpg ├── image2.jpg ├── image3.jpg ├── image4.jpg ├── image5.jpg ├── image6.jpg └── image7.jpg ├── index.html └── js ├── assets.js └── image-gallery-three.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea/ 2 | /node_modules/ 3 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | replace: { 6 | example: { 7 | src: ['src/index.html'], // source files array (supports minimatch) 8 | dest: 'dist/', // destination directory or file 9 | replacements: [{ 10 | from: 'image-gallery-three.js', // string replacement 11 | to: 'image-gallery-three.min.js' 12 | },{ 13 | from: 'assets.js', // string replacement 14 | to: 'assets.min.js' 15 | },{ 16 | from: 'image-gallery-three.css', // string replacement 17 | to: 'image-gallery-three.min.css' 18 | },{ 19 | from: 'style.css', // string replacement 20 | to: 'style.min.css' 21 | }] 22 | } 23 | }, 24 | uglify: { 25 | dist: { 26 | files: { 27 | 'dist/js/image-gallery-three.min.js': ['src/js/image-gallery-three.js'], 28 | 'dist/js/assets.min.js': ['src/js/assets.js'] 29 | } 30 | } 31 | }, 32 | cssmin : { 33 | styles: { 34 | src: ['src/css/image-gallery-three.css'], 35 | dest: 'dist/css/image-gallery-three.min.css' 36 | }, 37 | styles: { 38 | src: ['src/css/style.css'], 39 | dest: 'dist/css/style.min.css' 40 | } 41 | } 42 | }); 43 | grunt.loadNpmTasks('grunt-text-replace'); 44 | grunt.loadNpmTasks('grunt-contrib-uglify'); 45 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 46 | 47 | grunt.registerTask('default', ['replace', 'uglify', 'cssmin']); 48 | 49 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Image Gallery Threejs 2 | ===================== 3 | 4 | Threejs based Gallery/Slider Plugin for JQuery. 5 | 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. 6 | 7 | Required Libraries: 8 | ------- 9 | **Three.js** 10 | https://github.com/mrdoob/three.js/ 11 | 12 | **Stats.js** 13 | https://github.com/mrdoob/stats.js/ 14 | 15 | **TweenMax** 16 | http://www.greensock.com/gsap-js/ 17 | 18 | **PreloadJS** 19 | http://www.createjs.com/#!/PreloadJS 20 | 21 | Browser Compatibility 22 | ------ 23 | + Firefox - 30.0.0 + 24 | + Chrome - 35.0.0 + 25 | + Explorer: 9 + 26 | + Ipad Safari: 7.0.0 + 27 | + Iphone Safari: 7.0.0 + 28 | + IOS Safari: 7.0.0 + 29 | + Android Chrome: not tested help test :) 30 | + IOS Chrome: not tested help test :) 31 | 32 | [Demo](http://image-gallery-threejs.oso-link.com/) 33 | ------- 34 | 35 | Example 36 | ------- 37 | 38 | 54 |
55 | 56 | Options 57 | ------- 58 | 59 | 60 | 61 | 64 | 67 | 70 | 73 | 76 | 77 | 78 | 81 | 84 | 87 | 90 | 101 | 102 | 103 | 105 | 106 | 107 | 110 | 113 | 116 | 119 | 120 | 121 | 123 | 124 | 125 | 128 | 131 | 134 | 137 | 138 | 139 | 141 | 142 | 143 | 146 | 149 | 152 | 155 | 156 | 157 | 159 | 160 | 161 | 164 | 167 | 170 | 173 | 174 | 175 | 177 | 178 | 179 | 182 | 185 | 188 | 191 | 192 | 193 | 196 | 199 | 202 | 205 | 206 | 207 | 209 | 210 | 211 | 214 | 217 | 220 | 223 | 224 | 225 | 227 | 228 | 229 | 232 | 235 | 238 | 241 | 242 | 243 | 245 | 246 | 247 | 250 | 251 | 252 | 255 | 258 | 261 | 264 | 265 | 266 | 269 | 272 | 275 | 278 | 279 | 280 | 283 | 286 | 289 | 292 | 293 | 294 | 296 | 297 | 298 | 301 | 304 | 307 | 310 | 311 | 312 | 314 | 315 | 316 | 319 | 322 | 325 | 326 | 327 | 330 | 333 | 336 | 339 | 340 | 341 | 344 | 347 | 350 | 353 | 354 |
62 | Name 63 | 65 | Type 66 | 68 | Default 69 | 71 | Description 72 | 74 | Example 75 |
79 | manifest 80 | 82 | Array 83 | 85 | Null 86 | 88 | List of image paths 89 | 91 | [ 92 | {src:"image1.jpg", id:"image1"}, 93 | {src:"image2.jpg", id:"image2"}, 94 | {src:"image3.jpg", id:"image3"}, 95 | {src:"image4.jpg", id:"image4"}, 96 | {src:"image5.jpg", id:"image5"}, 97 | {src:"image6.jpg", id:"image6"}, 98 | {src:"image7.jpg", id:"image7"} 99 | ] 100 |
104 |
108 | imagePath 109 | 111 | String 112 | 114 | Null 115 | 117 | Path to the specific image listings 118 |
122 |
126 | dx 127 | 129 | Number 130 | 132 | 300 133 | 135 | horizontal spacing of Images 136 |
140 |
144 | dz 145 | 147 | Number 148 | 150 | 300 151 | 153 | Vertical spacing of Images 154 |
158 |
162 | deltaRotation 163 | 165 | Number 166 | 168 | 45 169 | 171 | Degress Rotation of the non active images 172 |
176 |
180 | planeSizeW 181 | 183 | Number 184 | 186 | 500 187 | 189 | Size of the plane Width 190 |
194 | planeSizeH 195 | 197 | Number 198 | 200 | 500 201 | 203 | Size of the plane Height 204 |
208 |
212 | alphaBackground 213 | 215 | Boolean 216 | 218 | true 219 | 221 | Setting if the background is transparent 222 |
226 |
230 | antialias 231 | 233 | Boolean 234 | 236 | true 237 | 239 | Setting if the renderer processes the objects with antialias 240 |
244 |
248 | progress 249 |
253 | - light 254 | 256 | Hex 257 | 259 | "#ff0000" 260 | 262 | Setting the color of the progress bar's light aspect 263 |
267 | - ambientLight 268 | 270 | Hex 271 | 273 | "#ffffff" 274 | 276 | Setting the color of the progress bar's ambient light aspect 277 |
281 | - position 282 | 284 | Array 285 | 287 | [0,100,0] 288 | 290 | Setting the position of the progress bar 291 |
295 |
299 | stats 300 | 302 | Boolean 303 | 305 | false 306 | 308 | sets if stats is shown or hidden. 309 |
313 |
317 | canvasWindow 318 | 320 | canvas 321 | 323 | sets canvas size 324 |
328 | 329 | 331 | defaultWidth 332 | 334 | Integer 335 | 337 | 500 338 |
342 | 343 | 345 | defaultHeight 346 | 348 | Integer 349 | 351 | 500 352 |
355 | 356 | Events 357 | ------ 358 | 359 | 360 | 361 | 364 | 367 | 368 | 369 | 371 | 372 | 373 | 376 | 379 | 380 | 381 | 383 | 384 | 385 | 388 | 391 | 392 | 393 | 395 | 396 | 397 | 400 | 403 | 404 | 405 | 407 | 410 | 411 | 412 | 414 | 417 | 420 | 421 |
362 | onImageLoadProgress 363 | 365 | Image load progress 366 |
370 |
374 | onImageLoadComplete 375 | 377 | Image load complete 378 |
382 |
386 | onImageLoad 387 | 389 | Image load initialization 390 |
394 |
398 | onNavigateComplete 399 | 401 | Navigation Complete 402 |
406 | 408 | Parameters 409 |
413 | 415 | obj 416 | 418 | active plane 419 |
422 | 423 | Methods 424 | ------- 425 | 426 | 427 | 428 | 431 | 434 | 435 | 436 | 439 | 442 | 443 | 444 | 446 | 447 | 448 | 451 | 454 | 455 | 456 | 458 | 459 | 460 | 463 | 466 | 467 | 468 | 470 | 473 | 474 | 475 | 477 | 480 | 483 | 486 | 487 | 488 | 490 | 493 | 494 | 495 | 497 | 510 | 511 | 512 | 514 | 515 | 516 | 519 | 522 | 523 | 524 | 526 | 527 | 528 | 531 | 534 | 535 | 536 | 538 | 539 | 540 | 543 | 546 | 547 |
429 | Execution 430 | 432 | Description 433 |
437 | <object>.next(); 438 | 440 | Animates to the next scene 441 |
445 |
449 | <object>.prev(); 450 | 452 | Animates to the previous scene 453 |
457 |
461 | <object>.goTo(<index>); 462 | 464 | Animates to the a specific scene 465 |
469 | 471 | Parameter 472 |
476 | 478 | index 479 | 481 | Number 482 | 484 | base zero position of the plane in an array. 485 |
489 | 491 | Example 492 |
496 | 498 | $(function(){
499 |     var box = $.ig3js({
500 |         manifest: [
501 |             {src:"image1.jpg", id:"image1"},
502 |             {src:"image2.jpg", id:"image2"},
503 |             {src:"image3.jpg", id:"image3"},
504 |         ],
505 |         imagePath: 'images/',
506 |     });
507 |     box.navigate.goTo(2);
508 | });

509 |
513 |
517 | <object>.perspective.default(); 518 | 520 | Sets the camera perspective default 521 |
525 |
529 | <object>.perspective.topRight(); 530 | 532 | Sets the camera perspective top right 533 |
537 |
541 | <object>.perspective.topLeft(); 542 | 544 | Sets the camera perspective top left 545 |
548 | -------------------------------------------------------------------------------- /dist/css/image-gallery-three.min.css: -------------------------------------------------------------------------------- 1 | body{-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-user-select:none;font-family:Monospace;background-color:#000;overflow:hidden}*{-webkit-tap-highlight-color:transparent}A:active,A:link,A:visited{text-decoration:none;color:#86b0b0}A:hover{text-decoration:underline;color:#00e5e5} -------------------------------------------------------------------------------- /dist/css/style.min.css: -------------------------------------------------------------------------------- 1 | #fork{position:absolute;top:0;right:0;background:url("../images/github.png") 0 0 no-repeat;display:block;width:149px;height:149px;text-indent:-9999px;z-index:9999}.ig3js-nav{text-align:center}.ig3js-perspectives{text-align:center}.ig3js-canvas{border:1px solid;text-align:center;display:block;position:relative;margin-left:auto;margin-right:auto;padding:50px;width:70%}.ig3js-canvas canvas{margin-left:auto;margin-right:auto}.ig3js-nav a,.ig3js-perspectives a{border:.1em solid;border-radius:21px;padding:1em;margin:.2em;background-color:#555;font-size:.7em;line-height:4em;color:#000;font-family:helvetica,arial;text-align:center;text-decoration:none}.ig3js-nav a:hover,.ig3js-perspectives a:hover{color:#fff;text-decoration:none} -------------------------------------------------------------------------------- /dist/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/github.png -------------------------------------------------------------------------------- /dist/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/image1.jpg -------------------------------------------------------------------------------- /dist/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/image2.jpg -------------------------------------------------------------------------------- /dist/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/image3.jpg -------------------------------------------------------------------------------- /dist/images/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/image4.jpg -------------------------------------------------------------------------------- /dist/images/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/image5.jpg -------------------------------------------------------------------------------- /dist/images/image6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/image6.jpg -------------------------------------------------------------------------------- /dist/images/image7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/dist/images/image7.jpg -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Image Gallery Threejs JQuery 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 84 | Fork me on GitHub 85 |
86 |
87 | 88 | 89 |
90 |
91 |
92 | default 93 | top right 94 | top left 95 |
96 | 97 | -------------------------------------------------------------------------------- /dist/js/assets.min.js: -------------------------------------------------------------------------------- 1 | Detector={canvas:!!window.CanvasRenderingContext2D,webgl:function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(e){return!1}}(),workers:!!window.Worker,fileapi:window.File&&window.FileReader&&window.FileList&&window.Blob,getWebGLErrorMessage:function(){var e=document.createElement("div");return e.id="webgl-error-message",e.style.fontFamily="monospace",e.style.fontSize="13px",e.style.fontWeight="normal",e.style.textAlign="center",e.style.background="#fff",e.style.color="#000",e.style.padding="1.5em",e.style.width="400px",e.style.margin="5em auto 0",this.webgl||(e.innerHTML=(window.WebGLRenderingContext?['Your graphics card does not seem to support WebGL.
','Find out how to get it here.']:['Your browser does not seem to support WebGL.
','Find out how to get it here.']).join("\n")),e},addGetWebGLMessage:function(e){var t=void 0!==(e=e||{}).parent?e.parent:document.body,o=void 0!==e.id?e.id:"oldie";(e=Detector.getWebGLErrorMessage()).id=o,t.appendChild(e)}}; -------------------------------------------------------------------------------- /dist/js/image-gallery-three.min.js: -------------------------------------------------------------------------------- 1 | !function(k){k.fn.ig3js=function(e){var d,l,c,p,g,h,f,w,m,u,E=k.extend({dx:300,dz:300,deltaRotation:45,planeSizeW:500,planeSizeH:500,manifest:[],imagePath:"",alphaBackground:!0,antialias:!0,progress:{light:"#ff0000",ambientLight:"#ffffff",position:[0,100,0]},onImageLoadProgress:null,onImageLoadComplete:null,onImageLoad:null,onNavigateComplete:null,stats:!1,canvasWindow:{defaultWidth:window.innerWidth,defaultHeight:window.innerHeight}},e),v=this,x=0,y=.8,T=E.planeSizeW,H=E.planeSizeH,R=E.dx,z=E.dz,M=2,L=E.deltaRotation,P=0,W=E.manifest,C=E.imagePath,b=0;function i(e){u<=++x&&(x=0);for(var t=0,n=0;nb+1?o(b+1):o(0)},prev:function(){o(0=1.3.0", 17 | "grunt-contrib-cssmin": "^4.0.0", 18 | "grunt-contrib-uglify": "^5.0.1", 19 | "grunt-contrib-watch": "^1.1.0", 20 | "grunt-text-replace": "^0.4.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/css/image-gallery-three.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | * { 4 | -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ 5 | } 6 | 7 | A:link {text-decoration: none; color: #86b0b0;} 8 | A:visited {text-decoration: none; color: #86b0b0;} 9 | A:active {text-decoration: none; color: #86b0b0;} 10 | A:hover {text-decoration: underline; color: #00e5e5;} -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | 2 | #fork { 3 | position: absolute; 4 | top: 0; 5 | right: 0; 6 | background: url("../images/github.png") 0 0 no-repeat; 7 | display: block; 8 | width: 149px; 9 | height: 149px; 10 | text-indent: -9999px; 11 | z-index: 9999; 12 | } 13 | 14 | 15 | .ig3js-nav{ 16 | text-align: center; 17 | } 18 | .ig3js-perspectives{ 19 | text-align: center; 20 | } 21 | .ig3js-canvas{ 22 | border: 1px solid; 23 | text-align: center; 24 | display: block; 25 | position: relative; 26 | margin-left: auto; 27 | margin-right: auto; 28 | padding: 50px; 29 | width: 70%; 30 | } 31 | .ig3js-canvas canvas{ 32 | margin-left: auto; 33 | margin-right: auto; 34 | } 35 | .ig3js-perspectives a, 36 | .ig3js-nav a{ 37 | border: 0.1em solid; 38 | border-radius: 21px; 39 | padding: 1em; 40 | margin: 0.2em; 41 | background-color: #555; 42 | font-size: 0.7em; 43 | line-height: 4em; 44 | color: #000; 45 | font-family: helvetica, arial; 46 | text-align: center; 47 | text-decoration: none; 48 | } 49 | 50 | .ig3js-perspectives a:hover, 51 | .ig3js-nav a:hover{ 52 | color: #fff; 53 | text-decoration: none; 54 | 55 | } -------------------------------------------------------------------------------- /src/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/github.png -------------------------------------------------------------------------------- /src/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/image1.jpg -------------------------------------------------------------------------------- /src/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/image2.jpg -------------------------------------------------------------------------------- /src/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/image3.jpg -------------------------------------------------------------------------------- /src/images/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/image4.jpg -------------------------------------------------------------------------------- /src/images/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/image5.jpg -------------------------------------------------------------------------------- /src/images/image6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/image6.jpg -------------------------------------------------------------------------------- /src/images/image7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blockhead123/image-gallery-threejs/fb48b6a4b7e687dce8f0bac5e0b46ea2dd2b556c/src/images/image7.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Image Gallery Threejs JQuery 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 84 | Fork me on GitHub 85 |
86 |
87 | 88 | 89 |
90 |
91 |
92 | default 93 | top right 94 | top left 95 |
96 | 97 | -------------------------------------------------------------------------------- /src/js/assets.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * @author mr.doob / http://mrdoob.com/ 4 | */ 5 | 6 | Detector = { 7 | 8 | canvas: !! window.CanvasRenderingContext2D, 9 | webgl: ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )(), 10 | workers: !! window.Worker, 11 | fileapi: window.File && window.FileReader && window.FileList && window.Blob, 12 | 13 | getWebGLErrorMessage: function () { 14 | 15 | var element = document.createElement( 'div' ); 16 | element.id = 'webgl-error-message'; 17 | element.style.fontFamily = 'monospace'; 18 | element.style.fontSize = '13px'; 19 | element.style.fontWeight = 'normal'; 20 | element.style.textAlign = 'center'; 21 | element.style.background = '#fff'; 22 | element.style.color = '#000'; 23 | element.style.padding = '1.5em'; 24 | element.style.width = '400px'; 25 | element.style.margin = '5em auto 0'; 26 | 27 | if ( ! this.webgl ) { 28 | 29 | element.innerHTML = window.WebGLRenderingContext ? [ 30 | 'Your graphics card does not seem to support WebGL.
', 31 | 'Find out how to get it here.' 32 | ].join( '\n' ) : [ 33 | 'Your browser does not seem to support WebGL.
', 34 | 'Find out how to get it here.' 35 | ].join( '\n' ); 36 | 37 | } 38 | 39 | return element; 40 | 41 | }, 42 | 43 | addGetWebGLMessage: function ( parameters ) { 44 | 45 | var parent, id, element; 46 | 47 | parameters = parameters || {}; 48 | 49 | parent = parameters.parent !== undefined ? parameters.parent : document.body; 50 | id = parameters.id !== undefined ? parameters.id : 'oldie'; 51 | 52 | element = Detector.getWebGLErrorMessage(); 53 | element.id = id; 54 | 55 | parent.appendChild( element ); 56 | 57 | } 58 | 59 | }; 60 | -------------------------------------------------------------------------------- /src/js/image-gallery-three.js: -------------------------------------------------------------------------------- 1 | // Title: Image Gallery Threejs Jquery 2 | // Description: Usage of Threejs to create jquery animated gallery. 3 | // Author: Oliver Ong 4 | // URL: https://github.com/blockhead123/image-gallery-threejs 5 | // Demo: http://image-gallery-threejs.zholpe.com/ 6 | // forked from djankey's "WebGL Carousel - Three.js" http://jsdo.it/djankey/carousel_webgl 7 | // I have reinvented the structure and made it jquery based as well as making it a plugin so that usage and customization is easily done 8 | 9 | (function( $ ) { 10 | $.fn.ig3js = function( options ) { 11 | 12 | // DEFAULT OPTIONS 13 | var settings = $.extend({ 14 | // These are the defaults. 15 | // These are the events 16 | dx: 300, 17 | dz: 300, 18 | deltaRotation: 45, 19 | planeSizeW: 500, 20 | planeSizeH: 500, 21 | manifest: [], 22 | imagePath: '', 23 | alphaBackground: true, 24 | antialias: true, 25 | progress: { 26 | light: "#ff0000", 27 | ambientLight: "#ffffff", 28 | position: [0, 100, 0] 29 | }, 30 | onImageLoadProgress: null, 31 | onImageLoadComplete: null, 32 | onImageLoad: null, 33 | onNavigateComplete: null, 34 | stats: false, 35 | canvasWindow: { 36 | defaultWidth: window.innerWidth, 37 | defaultHeight: window.innerHeight 38 | } 39 | }, options ); 40 | 41 | var ig3js = this; 42 | 43 | // GLOBALS 44 | var scene, 45 | camera, 46 | renderer, 47 | raycaster, 48 | stats, 49 | positions, 50 | group, 51 | planes, 52 | slides, 53 | len, 54 | select = 0, 55 | tweenTime = 0.8, 56 | planeSizeW = settings.planeSizeW, 57 | planeSizeH = settings.planeSizeH, 58 | dx = settings.dx, 59 | dz = settings.dz, 60 | show = 2, 61 | deltaRotation = settings.deltaRotation, 62 | half = 0, 63 | tweening = false, 64 | manifest = settings.manifest, 65 | imagePath = settings.imagePath, 66 | activePlane = 0, 67 | speedP = 1; 68 | 69 | ig3js.init = function() { 70 | // SCENE 71 | scene = new THREE.Scene(); 72 | 73 | // wndw = window; 74 | 75 | wndw = { 76 | innerWidth: ig3js.width(), 77 | innerHeight: 500 78 | }; 79 | 80 | // CAMERA 81 | camera = new THREE.PerspectiveCamera( 45, wndw.innerWidth / wndw.innerHeight, 1, 20000); 82 | camera.position.set( 0, 100, 1000 ); 83 | scene.add(camera); 84 | 85 | // RENDERER 86 | if ( Detector.webgl) { 87 | renderer = new THREE.WebGLRenderer( {antialias:settings.antialias, alpha: settings.alphaBackground} ); 88 | } else { 89 | renderer = new THREE.CanvasRenderer(); 90 | } 91 | // CONTAINER 92 | var container = this[0]; 93 | container.appendChild(renderer.domElement); 94 | 95 | // POINT LIGHT 96 | var light = new THREE.PointLight(settings.progress.light); 97 | light.position.set(500, 500, 0); 98 | scene.add(light); 99 | 100 | // AMBIEND LIGHT 101 | var ambientLight = new THREE.AmbientLight(settings.progress.ambientLight); 102 | scene.add(ambientLight); 103 | 104 | // CAROUSEL GROUP 105 | group = new THREE.Object3D(); 106 | group.position.y = planeSizeH/2; 107 | scene.add(group); 108 | 109 | // PRELOADER 110 | var preloader = new THREE.Object3D(); 111 | preloader.position.set(settings.progress.position[0], settings.progress.position[1], settings.progress.position[2]); 112 | scene.add(preloader); 113 | 114 | var preloaderBg = new THREE.Mesh(new THREE.PlaneGeometry(500, 30, 1, 1), new THREE.MeshBasicMaterial( { color: "#0f0f2e", transparent:true } ) ); 115 | preloader.add(preloaderBg); 116 | 117 | var preloaderLine = new THREE.Mesh(new THREE.PlaneGeometry(494, 24, 1, 1), new THREE.MeshBasicMaterial( { color: "#00e5e5", transparent:true } ) ); 118 | preloaderLine.position.set(0, 0, 1); 119 | preloaderLine.scale.x = 0; 120 | preloader.add(preloaderLine); 121 | 122 | // IMAGE PRELOADER 123 | var queue = new createjs.LoadQueue(false, imagePath); 124 | queue.addEventListener("progress", handleImageLoadProgress); 125 | queue.addEventListener("complete", handleImageLoadComplete); 126 | queue.addEventListener("fileload", handleImageLoad); 127 | queue.loadManifest(manifest); 128 | 129 | function handleImageLoadProgress(event) { 130 | //console.log("progress: "+event.progress); 131 | TweenMax.to(preloaderLine.scale, 0.5, { x:event.progress}); 132 | } 133 | 134 | function handleImageLoadComplete(event) { 135 | // all images loaded 136 | TweenMax.to(preloaderBg.material, 0.5, { opacity:0, delay:0.5}); 137 | TweenMax.to(preloaderLine.material, 0.5, { opacity:0, delay:0.5, onComplete:removePreloader}); 138 | setTimeout(createPlanes, 1000); 139 | } 140 | 141 | function removePreloader() { 142 | scene.remove(preloader); 143 | } 144 | 145 | function handleImageLoad(event) { 146 | // image loaded 147 | } 148 | 149 | function createPlanes() { 150 | len = manifest.length; 151 | planes = []; 152 | slides = []; 153 | 154 | half = Math.floor((len - 1) / 2); 155 | positions = []; 156 | var i, id = 0, n = 0; 157 | for (i = select; i < select + len; i++) { 158 | id = i; 159 | if (i >= len) id -= len; 160 | positions[id] = n; 161 | n++; 162 | } 163 | 164 | for(i=0;i= len) select = 0; 254 | 255 | var id = 0; 256 | for (var i = 0; i < len; i++) { 257 | id = positions[i]; 258 | id += direction; 259 | 260 | if (id < 0) id = len - 1; 261 | else if (id >= len) id -= len; 262 | 263 | positions[i] = id; 264 | } 265 | 266 | updatePlanes(false); 267 | } 268 | 269 | var onC = function(obj, rot, planes){ 270 | if(obj==activePlane){ 271 | ig3js.triggerEvent("on-navigate-complete", planes[activePlane]); 272 | } 273 | }; 274 | 275 | /** 276 | * Update Planes 277 | * @param fast 278 | */ 279 | function updatePlanes(fast) 280 | { 281 | var plane_x, plane_z; 282 | var tween = true; 283 | var sAlpha = 1; 284 | var showDetails; 285 | var tweenRatio = 1; 286 | var rot = 0; 287 | var id = 0; 288 | var time = tweenTime; 289 | 290 | if (fast===true) time = 0; 291 | var delayScale = 0; 292 | if (fast === false) delayScale = 0; 293 | 294 | for (var i = 0; i < len; i++) { 295 | id = positions[i]; 296 | showDetails = false; 297 | 298 | if (id === 0) { // selected 299 | plane_x = id * dx; 300 | tween = true; 301 | sAlpha = 1; 302 | showDetails = true; 303 | rot = 0; 304 | slides[i].side = 0; 305 | slides[i].dif = 0; 306 | } else if (id <= half) { // right side 307 | plane_x = id * dx; 308 | 309 | if (id <= show) sAlpha = 1; 310 | else sAlpha = 0; 311 | 312 | if (id > show + 3) tween = false; 313 | else tween = true; 314 | 315 | rot = - id * deltaRotation; 316 | 317 | slides[i].side = 1; 318 | slides[i].dif = id; 319 | } else { // left side 320 | id = -(id - len); 321 | plane_x = -id * dx; 322 | 323 | if (id <= show) sAlpha = 1; 324 | else sAlpha = 0; 325 | 326 | if (id > show + 3) tween = false; 327 | else tween = true; 328 | 329 | rot = id * deltaRotation; 330 | 331 | slides[i].side = 2; 332 | slides[i].dif = id; 333 | } 334 | 335 | if(time!==0) { 336 | if (tween===true) tweenRatio = 1; 337 | else tweenRatio = 0; 338 | } 339 | 340 | plane_z = id * dz; 341 | planes[i].visible = tween; 342 | 343 | if(rot==0){ 344 | activePlane = i; 345 | } 346 | 347 | TweenMax.to(planes[i].position, time * tweenRatio, { 348 | x:plane_x, 349 | z:-plane_z, 350 | delay:delayScale * id *tweenTime/3, 351 | onComplete: onC, 352 | onCompleteParams:[i, rot, planes] }); 353 | 354 | TweenMax.to(planes[i].rotation, time * tweenRatio, { 355 | y:rot*Math.PI/180, 356 | delay:delayScale * id *tweenTime/3 }); 357 | 358 | TweenMax.to(planes[i].material, time * tweenRatio, { 359 | opacity:sAlpha, 360 | delay:delayScale * id *tweenTime/3}); 361 | 362 | tweening = true; 363 | setTimeout(resetTween, time*75); 364 | } 365 | 366 | } 367 | 368 | function resetTween() { 369 | tweening = false; 370 | } 371 | 372 | function gotoImage(id) 373 | { 374 | select = id; 375 | var i, dir; 376 | 377 | if (slides[id].side === 0) { 378 | console.log("click action"); 379 | } else { 380 | if (slides[id].side === 1) { 381 | dir = -1; 382 | } else { 383 | dir = 1; 384 | } 385 | 386 | for (i = 0; i < slides[id].dif; i++) { 387 | setTimeout(gotoDir, i * 100, dir); 388 | } 389 | } 390 | } 391 | 392 | ig3js.navigate = { 393 | next: function(){ 394 | if( (slides.length) > activePlane + 1){ 395 | gotoImage(activePlane+1); 396 | } 397 | else{ 398 | gotoImage(0); 399 | } 400 | }, 401 | prev: function(){ 402 | if( (activePlane) > 0){ 403 | gotoImage(activePlane-1); 404 | } 405 | else{ 406 | gotoImage(slides.length-1); 407 | } 408 | }, 409 | goTo: function(i){ 410 | gotoImage(i); 411 | } 412 | }; 413 | 414 | var boxTest = { 415 | position: { 416 | x: 0, 417 | y: 100, 418 | z: 1000 419 | }, 420 | rotation: { 421 | x: 0, 422 | y: 0, 423 | z: 0 424 | } 425 | }; 426 | 427 | var setPerspective = function(arg){ 428 | 429 | TweenMax.to(boxTest.position, speedP, { 430 | x:arg.position.x, 431 | y:arg.position.y, 432 | z: arg.position.z, 433 | onUpdate: function(){ 434 | camera.position.set(this.target.x, this.target.y, this.target.z); 435 | }}); 436 | TweenMax.to(boxTest.rotation, speedP, { 437 | x: arg.rotation.x * Math.PI / 180, 438 | y: arg.rotation.y * Math.PI / 180, 439 | z: arg.rotation.z * Math.PI / 180, 440 | onUpdate: function(){ 441 | console.log(this.target.x); 442 | camera.rotation.x = this.target.x; 443 | camera.rotation.y = this.target.y; 444 | camera.rotation.z = this.target.z; 445 | }}); 446 | }; 447 | 448 | ig3js.perspective = { 449 | default: function(){ 450 | 451 | var arg = { 452 | position: { 453 | x: 0, 454 | y: 100, 455 | z: 1000 456 | }, 457 | rotation: { 458 | x: 0, 459 | y: 0, 460 | z: 0 461 | } 462 | }; 463 | 464 | setPerspective(arg); 465 | }, 466 | topRight: function(){ 467 | 468 | var arg = { 469 | position: { 470 | x: 600, 471 | y: 700, 472 | z: 800 473 | }, 474 | rotation: { 475 | x: -30, 476 | y: 30, 477 | z: 15 478 | } 479 | }; 480 | 481 | setPerspective(arg); 482 | 483 | }, 484 | topLeft: function(){ 485 | 486 | var arg = { 487 | position: { 488 | x: -600, 489 | y: 700, 490 | z: 800 491 | }, 492 | rotation: { 493 | x: -30, 494 | y: -30, 495 | z: -15 496 | } 497 | }; 498 | 499 | setPerspective(arg); 500 | 501 | } 502 | }; 503 | 504 | function resizeHandler() { 505 | camera.aspect = wndw.innerWidth / wndw.innerHeight; 506 | camera.updateProjectionMatrix(); 507 | renderer.setSize(wndw.innerWidth, wndw.innerHeight); 508 | render(); 509 | } 510 | 511 | function animate() { 512 | requestAnimationFrame(animate); 513 | if(settings.stats==true){ 514 | stats.update(); 515 | } 516 | render(); 517 | } 518 | 519 | 520 | function resizeRendererToDisplaySize(renderer) { 521 | const width = ig3js.width(); 522 | const height = ig3js.height(); 523 | const needResize = ig3js.width() !== width || ig3js.height() !== height; 524 | if (needResize) { 525 | renderer.setSize(width, height, false); 526 | } 527 | return needResize; 528 | } 529 | function render() { 530 | ig3js.find('canvas').width(ig3js.width()); 531 | ig3js.find('canvas').height(settings.canvasWindow.defaultHeight); 532 | renderer.render( scene, camera ); 533 | camera.aspect = ig3js.width() / settings.canvasWindow.defaultHeight; 534 | camera.updateProjectionMatrix(); 535 | } 536 | 537 | function onDocumentMouseDown(event) { 538 | event.preventDefault(); 539 | 540 | var vector = new THREE.Vector3( ( event.clientX / wndw.innerWidth ) * 2 - 1, - ( event.clientY / wndw.innerHeight ) * 2 + 1, 0.5 ); 541 | 542 | raycaster.setFromCamera( vector, camera ); 543 | var intersects = raycaster.intersectObjects( group.children ); 544 | 545 | if ( intersects.length > 0 ) { 546 | for(var i=0;i