Imagine this three.js scene, set up with an OrthographicCamera and OrbitControls:

When the user drags the yellow disc (meant to represent the Sun), the disc needs to move along its yellow circle in response to this action. Here’s the scene from another angle, so you can see the full yellow circle:

So, my event handler must determine which point on this circle is closest to the current cursor position. This yellow circle is a THREE.Mesh, by the way.

I’m using THREE.Raycaster to determine some mouseover events, using its intersectObjects() function, but it’s not clear to me how to find the nearest point of a single object with this Raycaster. I’m guessing there is some simple math I can do after translating the mouse’s position to world co-ordinates. Can someone help me with this? Is Three.js’s Raycaster useful here? If not, how do I determine the nearest point of this mesh?

As far as I can see at your code, you are using a TorusBufferGeometry to visualize the yellow circle, right? If so, why don’t you just move the sun disc to the next intersection point between the ray and the torus geometry? I’m not sure why you need the nearest vertex for this

I’ve just put together something like the jsfiddle you linked to. intersectObject() only returns intersections of a mesh that the mouse is over. What if I’m dragging the sun and the mouse doesn’t happen to be over the yellow sunDeclination orbit line? That’s where I’m having trouble imagining how to use the Raycaster.

Okay, I see what you mean. I’ve changed the fiddle to something different. It’s not perfect but it should produce your desired result: https://jsfiddle.net/f2Lommf5/14316/

The idea is to do a ray intersection test with a plane in which the torus lies. Next, the code searches for the closest point to the torus geometry. This is done via Triangle.closestPointToPoint() for all triangles. Keep in mind that this approach is computationally expensive, so use it carefully.

Hi!
Maybe it’s better to use THREE.Line() or THREE.LineLoop() or THREE.LineSegments() for a circle and set bigger value for raycaster.linePrecision?
But it’s just a thought

Yeah, this could be a fast alternative. However, normal lines are drawn with a width of one which is not super
user-friendly if users should interact with them (I refer to the visual feedback not to the actual intersection test).