在球体表面拖动的点 THREE.JS

问题描述

我想用用户可以用鼠标光标拖动的点创建一个地球仪。

My Code

我已经设置了主球体，并以一个红色小球体作为示例点，但如何确保小点仅在主球体表面上移动？

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

解决方法

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

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

这在地球的地平线上可能会变得很奇怪，因为光线将开始与地球的曲线相切，可能会导致运动变得抽搐/过度敏感。但这是你必须处理的事情。

每次鼠标移动时进行光线投射的过程成本很高。您可能会发现您只需要每 N（小数）mousemove 个事件更新一次点即可保持流畅的交互率。

这些方法对于内存来说也很昂贵。确保重用 Raycaster 和任何临时向量对象，以免内存堆失控。