Is there a way to bind a click event to an object in Three.js

Question

In Three.js, is there a way to bind a click event to an object so that when the object is clicked the contents of a div element are updated? Something like this (note I'm using jQuery as well):

mesh.click(function(){
  $('#myDiv').html('Hello Goober');
});

I'm also using the OrbitControls, which allows user to left-click+drag the scene to rotate it and right-click+drag the scene to pan. I'd like to keep that functionality while also handling a single click on the mesh as described above.

Answer 1

An example of this by Lee Stemkoski

This sends a ray through a mesh, selects the face. It's possible to use bouning boxes, bounding spheres, proxy meshes etc.

http://stemkoski.github.io/Three.js/Mouse-Click.html

Answer 2

You can use THREE.Raycaster for picking and more.