Creating 3D Horizontal Carousel using Three.js with Canvas Rendering
I start this experiment because the goal was to have a good 3D perspective on Carousel Items and also I chose Three.js because I already made some other experiments with. Now, the question was to decide what Geometry to use for adding photos as texture. My first idea was to build a TorusGeometry and than to add on Torus Object surfaces the images. But this way was wrong because I wanted to have also spaces between photos. So, the right way at the end was to use PlaneGeometry. The feature with is missing and can be added is the click event on each Plane using document.addEventListener to open a modal layer or something.
See Horizontal demo experiment in action:
http://maran-emil.de/experiments/demo10/
See Vertical demo experiment in action:
http://maran-emil.de/experiments/demo10/index_vertical.htm
See Vertical minified demo experiment without images in action:
http://jsfiddle.net/quay0ud9/
Images Source:
http://web.stagram.com/n/crisuwork/
Update:
I found today another Three.js Carousel experiment made by Nikos half year ago which runs mostly in the same way and has also event attached on each Plane Geometry Object. The project name is "Carousel Slideshow with HTML 5 and three.js" and you can read more at this page:
http://nikos-web-development.netai.net/blog/carousel-slideshow-with-html-5-and-three-js/
References:
(1). Javascript / Math - improper rotation of of items around a circle:
http://stackoverflow.com/questions/10436132/javascript-math-improper-rotation-of-of-items-around-a-circle
(2). Three.js
http://mrdoob.github.com/three.js/