three.js：查找网格到鼠标光标的最近点

Question

想象一下这个使用OrthographicCamera和OrbitControls设置的Three.js场景：

当用户拖动黄色光盘（代表太阳）时，光盘需要沿着其黄色圆圈移动以响应此动作。这是另一个角度的场景，因此您可以看到整个黄色圆圈：

因此，我的事件处理程序必须确定该圆上的哪个点最接近当前光标位置。顺便说一下，这个黄色的圆圈是三个。

我正在使用THREE.Raycaster通过其intersectObjects()函数来确定一些鼠标悬停事件，但是我不清楚如何使用此Raycaster查找单个对象的最近点。我猜想在将鼠标的位置转换为世界坐标后可以做一些简单的数学运算。有人可以帮我弄这个吗？ Three.js的Raycaster在这里有用吗？如果没有，如何确定该网格的最近点？

如果有帮助，请参见完整的源代码：https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/HorizonView.jsx搜索this.sunDeclination，它对应于黄色圆圈的Mesh对象。

有关工作示例，请访问：https://ccnmtl.github.io/astro-interactives/sun-motion-simulator/

作为参考，太阳的行为应像这样：https://cse.unl.edu/~astrodev/flashdev2/sunMotions/sunMotions068.html（需要Flash）

Answer 1

最简单的版本：

• 在磁盘上获取一个点
• 在圆的平面上投影
• 知道圆的半径，计算将向量乘以标量的乘数

---

var point = res.point.clone();
point.z = 0; // Project on circle plane
var scale = circleRadius / point.length();
point.multiplyScalar(circleRadius / point.length())

[https://jsfiddle.net/c4m3o7ht/]

Answer 2

raycaster返回被射线击中的所有对象..世界空间中的所有命中点。（您可以通过object3d.worldToLocal和localToWorld在模型空间之间进行转换）

它返回命中距离..您可以根据需要进行启发式排序...

我通常的工作是在mouseDown上进行..记录对象和点..然后在mouseMove上获得相同的对象命中点，并使用这两个点之间的差值应用我的编辑操作。

这是你在说什么吗？