Three.js picking is not working correctly with custom geometry

Question

I have a problem with picking implementation. I found a number of different examples doing what I want, but I really cannot make it work as it should. I mainly followed this example

Basically, I have some meshes in my scene and, double clicking any of them, I'd like to change the color of the chosen one. In the scene there are 3 small cubes that are always selected and some more complex meshes that often aren't. I'd like to know if anybody can help me figuring why, if the cubes can be selected, the others often can't.

The code I used to detect the clicked mesh is:

var projector = new THREE.Projector();

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( scene.children, true );

if ( intersects.length > 0 ) 
{
    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}

Answer 1

ray.intersectObject(), which is called by ray.intersectObjects(), requires face centroids.

mesh.geometry.computeCentroids();

This is important if you are creating your own custom geometries.

three.js r.51

As of r54 this is no longer necessary. See comment from WestLangley