There seems to be an issue with the code below, as the "intersects" variable does not populate with items in the onDocumentMouseDown event handler when I simply click an object. It only detects the object clicked when I click and slightly drag the mouse before it recognizes the item. I am also using trackballcontrols, which may be a factor in this behavior. You can view an example of this in the following jsfiddle link: http://jsfiddle.net/marktreece/xvQ3f/
When you click on the cube in the jsfiddle example, you'll notice that the color does not change as expected. However, if you click on the cube and then move it slightly before releasing the mouse button, the color does change. How can I modify the code so that a simple click on the object is enough to trigger the desired action?
Below is the code for my mousedown event handler:
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( scene.children, true );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}