指向球体表面拖动 THREE.JS

Question

我想创建一个地球仪，其中包含用户可以使用鼠标光标拖动的点。

My Code

我已经设置了主球体和一个小的红色球体作为示例点，但是如何确保小点只在主球体的表面移动？

PS：在代码中，我基本上创建了两个球体：主球体和较小的红色球体。我添加了轨道控件和一个 Raycaster 来拖动小球体，但我无法将较小的球体限制在较大的球体表面

Answer 1

最简单的方法是使用 Raycaster。该方法将如下所示：

1. 在 mousedown 上，将光线投射器配置为从您的鼠标位置投射。
2. 检查与您的 dot/dots.
的交集
3. 如果您与一个点相交，请将您的应用程序置于“拖动”状态。
4. 在 mousemove 事件中，用最新的鼠标位置更新光线投射器，并投射到 globe.
5. 将点的位置设置为地球上射线的交点。
6. 在 mouseup 上，取消设置“拖动”状态。

这对于地球的地平线可能会变得很奇怪，因为光线将开始与地球的曲线相切，可能导致运动变为 twitchy/over-sensitive。但这是你必须处理的事情。

每次鼠标移动时进行光线投射的处理成本很高。您可能会发现您只需要每 N（小数字）mousemove 个事件更新点以保持平滑的交互率。

这些方法的内存消耗也很大。确保重复使用 Raycaster 和任何临时向量 objects，以免内存堆失控。