Saturday, March 9, 2013

Photo Cube

In my exploration of the various javascript libraries, I ran into three.js. It enables the user to do 3D in the browser without going into the complex underlying math.

I found it well conceived. Its structure is relatively easy to grasp and the syntax is usually self explanatory. As a result, somebody with very little experience in javascript/programming, like me, can create reasonably good looking effects in a few hours. You just have to define a scene, a camera, some objects (cubes, spheres, etc), and a renderer (WebGL, Canvas, SVG - the best option, if available is WebGL, as computations are performed by the GPU). By default the camera faces the (xy) plane, the x axis x being horizontal pointing right and y vertical pointing up. The z axis is orthogonal to the screen pointing to the viewer. Axes and a 'test' small sphere are convenient to get orientated.

For some time, I had being looking to do a photo cube, so that the experience of going through the pictures is less boring.

With this in mind, I dived into three.js, googled around and found some very useful pages:

Below is the result.
The 'drag to spin the cube' works on an iPad too.

The code is available in this github repo.
You can easily tweak the point of view, distance of the camera, angle of view, amongst others.
And the pictures, of course ! I just put what I like as an example