Javascript Three.js：将摄影机移动到球体表面上的一个点，并使摄影机沿曲面查看

在我的项目中，我使用渲染3D球体。地球仪是一个球体，其中：

radius   = 100
position = (0, 0, 0)

相机使用具有以下功能的轨道控制：

OrbitControls.target = (0, 0, 0)

这意味着默认情况下，球体位于画布的中心。 地球表面有标记

目标

当用户点击一个标记时，相机应该更靠近地球表面，观察标记的位置（而不是地球的中心）。这将使画布底部只能看到地球的一小部分。我在这里找到了一个工作演示，它正好显示了这个概念（如果你点击一个绿色标记）。有人能给我指出一个方向，比如我怎样才能做到这一点吗

当前实施情况

逐渐将OrbitControl.target设置为marker.position

 new TWEEN.Tween({ x: controls.target.x, y: controls.target.y, z: controls.target.z })
  .to({ x: c1.x, y: c1.y, z: c1.z}, duration)
  .onUpdate(d => {
    controls.target.set(d.x, d.y, d.z)
  })
  .start()

逐渐将相机移动到我发现自己的特定位置

// TODO: Find a way to calculate this position? 
new TWEEN.Tween({ x: camera.position.x, y: camera.position.y, z: camera.position.z })
  .to(pointIFoundMyself, duration)
  .onUpdate(d => {
    camera.position.set(d.x, d.y, d.z)
  })
  .start()

将地球仪稍微移动到画布底部（-y）

问题

我自己为地图上的每一个标记寻找一个点并不是真正可行的。地球上可见的部分在每个标记（位置）上也有很大的不同，而在我上面链接的网站上是非常一致的。我想知道是否有更好的方法来实现这个动画。如果能朝着正确的方向努力，我们将不胜感激

---

编辑（卡斯特罗的回答）

首先，谢谢你的快速回复——看来我们越来越近了！但是，我在生成正确的曲线时遇到了一些问题。当前，曲线是使用

摄影机位置
（开始）和
标记位置
（结束）生成的，如下所示：

// converts (lat, lng) to world position
const coords = curr.getCoords(marker.node.location.lat, marker.node.location.lng, 0.20)

const curve = new THREE.CatmullRomCurve3( [
  new THREE.Vector3( camera.position.x, camera.position.y, camera.position.z ),
  new THREE.Vector3( coords.x, coords.y, coords.z ),
]);

这（显然）产生了一条直线。当摄影机位于曲线末端时，球体在画布中的位置不正确。如以下标记的屏幕截图：


但我希望地球仪的所有标记都是这样定位的：


您可能知道我如何动态创建这样的曲线，以便在曲线末端，地球仪以与上面的屏幕截图相同的方式显示（对于地球仪上的任何标记）？谢谢。
我建议您选中“动画视图”选项，我认为这正是您需要的。
您可以在该代码中进行测试，只需基于球体周围的点创建一个环或一条曲线即可
谢谢您的回答。但是，我在生成正确的曲线时遇到了一些问题，你能看看我对这个问题的编辑吗？我发现了另一个问题，它与你的问题非常相似，可以为你指出正确的方向
// converts (lat, lng) to world position
const coords = curr.getCoords(marker.node.location.lat, marker.node.location.lng, 0.20)

const curve = new THREE.CatmullRomCurve3( [
  new THREE.Vector3( camera.position.x, camera.position.y, camera.position.z ),
  new THREE.Vector3( coords.x, coords.y, coords.z ),
]);