WIP 20121121

I played a little bit more with lights until I got satisfied with the general look. Three.js won't be generating the same sort of photorealistic shadows that a raytracer would generate for the time being, so I'll content myself with this slightly weird look. Although I've tuned the parameters a bit; the default shadows were a bit too harsh. Better be subtle.

I focused then in the interactive side of the thingie: detect whether I had clicked on a certain face, then do something, such as changing the face color. I got it working by manipulating each face's vertex colours and etc.

This one was to ensure I was properly identifying which face had which index. Since the faces aren't arranged in a bidimensional array but in a unidimensional one, I had to make use of the classic index = rowWidth * row + column formula to link rows and columns to the indices, but this was looking a bit too hacky for me at that point.

This render reminded me to a scarf I knitted once. Not that it was a problem; the actual problem was that the plane wouldn't cast any shadow, unless I rotated it by Math.PI in the y axis, but then it would be horizontally mirrored, and when you thought you were clicking on row 0 you were actually clicking on the last one. Mr.doob told me that's because to cast shadows you have to have an "outer shell", so to speak, and that's why the plane did cast shadows when its back face was turned towards the light, I guess (I haven't dug into the code to check that out).

I tried with adding a simple mesh behind the plane and making it cast shadows, but the this isn't right, too many hacks in one file feeling was just reaching alarming levels.

So I finally changed to use separate cubes and changing its material color with cube.material.color.setHex( whatever ). I also have them arranged in an nxn matrix, so they are easier to address than with the other method. Oh and I can pick them easily thanks to the mighty power of the RAY's.

What's not to like?!?