javascript - three.js:找到网格到鼠标光标的最近点

Question

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

当用户拖动黄色圆盘(代表太阳)时，圆盘需要沿着其黄色圆圈移动以响应此操作。这是另一个 Angular 场景，所以你可以看到完整的黄色圆圈:

因此，我的事件处理程序必须确定此圆上的哪个点最接近当前光标位置。顺便说一句，这个黄色圆圈是一个 TREE.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 (需要闪存)

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/ ]