Three.js:将摄像机移动到球体表面的一个点，使摄像机沿着表面看上去。
在我的项目中，我使用https://github.com/vasturiano/react-globe.gl渲染一个3D地球仪。地球是一个球体，其中：
radius = 100
position = (0, 0, 0)该相机使用OrbitControls，包括：
OrbitControls.target = (0, 0, 0)这意味着在默认情况下，球体位于画布的中心。地球表面有标记。
目标
当用户点击一个标记时，相机应该靠近地球表面，观察标记的位置(而不是地球的中心)。这只会在画布底部使地球上的一小部分可见。我在这里找到了一个工作演示，它准确地显示了这个概念，https://www.fonterra.com/nz/en/campaign/from-here-to-everywhere.html#/home (如果您单击绿色标记)。有人能指点我如何做到这一点吗？
当前实现
逐步将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)
new TWEEN.Tween({ x: world.position.x, y: world.position.y, z: world.pos})
.to({x: world.position.x, y: -25, z: world.position.z}, duration)
.onUpdate(d => {
world.position.set(d.x, d.y, d.z)
})
.start()问题
单独为地图上的每一个标记找一个点是不可行的。地球上可见的部分在每个标记(位置)上也有很大的不同，而在我上面链接的网站上是非常一致的。我想知道是否有更好的方法来实现这个动画。如果能朝正确的方向前进，我们将不胜感激。
编辑(jscastro的答案)
首先，谢谢你的快速回复-似乎我们越来越近了！不过，我在生成正确的曲线时遇到了一些困难。目前，曲线是用camera.position (start)和marker.position (end)生成的，如下所示：
// 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 ),
]);这(显然)会产生一条直线。当照相机在曲线末端时，球体在帆布上的位置不正确。就像这个标记的截图：
但我希望地球为所有的标记都这样定位：
您是否知道我如何动态地创建这样的曲线，以便在曲线的末尾，地球仪以与上面的屏幕截图相同的方式显示(对于地球上的任何标记)？谢谢。
回答 1
Stack Overflow用户
发布于 2020-08-01 22:24:28
https://stackoverflow.com/questions/63210299
复制相似问题
腾讯云开发者
