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

Question

想象一下这个three.js场景，设置了OrthographicCamera和OrbitControls：

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

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

我正在使用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())

[Qazxswpoi]

Answer 2

raycaster返回被光线击中的所有物体..世界空间中的所有生命点..（您可以通过object3d.worldToLocal和localToWorld转换为模型空间/从模型空间转换）

它返回命中距离..你可以根据你需要的任何启发式排序...

我通常做的是在mouseDown上施放..记录对象和点..然后在mouseMove上获得相同的对象点击点，并使用这两个点之间的差异应用我的编辑操作。

这就是你在说什么？