三.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

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

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

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

你说的是这个吗？