Three.js constrain object drag to surface of another object

Three.js constrain object drag to surface of another object

I want to be able to drag an object, but have it 'snap' to the surface of
another. I don't care if it only 'snaps' when I release the mouse, or if
it updates live.
Ultimate goal: create a smooth shape in Blender, import it, and be able to
snap drag to that shape.
I tried taking this example:
http://stemkoski.github.io/Three.js/Mouse-Click.html and changing the
'click' effect to a 'drag' effect. Then I incorporated it with this
example:
http://mrdoob.github.io/three.js/examples/webgl_interactive_draggablecubes.html
The effect is working, in that I can drag any of the cubes across the
sphere, and the face hilights.
Then I tried taking the sphere, and snapping it to the face using this
flawed logic:
SELECTED.position.x = intersectsRay[ 0 ].face.normal.x;
SELECTED.position.y = intersectsRay[ 0 ].face.normal.y;
SELECTED.position.z = intersectsRay[ 0 ].face.normal.z;
The problem being, the face 'normal' is the center of the (sphere) in this
case. So the dragged objects always snap to the center of the sphere...
Does anyone know a way to find the x,y,z of the FACE (no matter what the
shape), or any other way to implement this concept?