How to apply mouse Click event for 3D model - html

Question

Added 3D collada (.dae) file in to a scene. The 'DAE' file contains geometry with the name "monster" and the id is "monster-mesh-skin". I tried to apply mouse click event to the geometry "monster". like,
var monster = dae.getChildByName("monster"); // get geometry
monster.addEventListener("click", meshClickHandler);
The click event is not working. And I tried THREE.Vector3() and THREE.Ray like,
var mouse3D = new THREE.Vector3();
mouse3D.x = event.clientX;
mouse3D.y = event.clientY;
mouse3D.z = 0.5;
var ray = new THREE.Ray(mouse3D);
var intersects = ray.intersectObjects(monster);
console.dir(intersects);
on document click handler. In intersects variable not contain any value.
Is there any solution to apply mouse event for 3D model and control it?

Answer 1

It appears you need to rethink the approach a bit. Any 3D object in your scene exists exclusively as a 2D "drawing" of an object and itself can not have standard DOM event handlers attached to it.
What you want is a general event listener on the document itself to capture mouse clicks, like so:
document.addEventListener( 'click', detectIntersect, false );
Now, there are a ton of example right in Three.js example directory that can show you exactly how to "click your object", but in 3D terms it's refered to as object picking or raycasting an object. These terms might help when searching for examples/help. Have a look at these examples:
http://threejs.org/examples/webgl_interactive_cubes.html
http://threejs.org/examples/canvas_interactive_cubes_tween.html
One last note, it appears your using r57 or earlier of the Three.js library. I would suggest upgrading to the latest build as getting support from the community is easier when were all on the same page :)
Hope that helps, take care.