THREE.js围绕使用轨道路径的对象旋转相机

Question

我正在努力解决这个问题。

在我的场景中，我有一个摄像头，它看着物体的质心。我有一些按钮可以在特定视图（前视图，后视图...）上沿着不可见的球体围绕对象（恒定半径）设置摄像机位置。

当我点击按钮时，我想让相机沿着球体表面从其起始位置移动到结束位置。当相机移动时，我希望它保持固定物体的质心。

有没有人有关于如何实现这一目标的线索？

感谢您的帮助！

Answer 1

如果你很高兴/喜欢使用基本的三角，然后在你的初始化部分，你可以这样做：

var cameraAngle = 0; 
var orbitRange = 100; 
var orbitSpeed = 2 * Math.PI/180; 
var desiredAngle = 90 * Math.PI/180; 
... 
camera.position.set(orbitRange,0,0); 
camera.lookAt(myObject.position); 

然后在渲染/动画节中，你可以这样做：

if (cameraAngle == desiredAngle) { orbitSpeed = 0; } 
else { 
    cameraAngle += orbitSpeed; 
    camera.position.x = Math.cos(cameraAngle) * orbitRange; 
    camera.position.y = Math.sin(cameraAngle) * orbitRange; 
} 

当然，你的按钮会修改desiredAngle（°,9°,18°或270 °），你需要围绕正确的平面旋转（我围绕着t旋转他在XY平面上方），你可以玩orbitRange和orbitSpeed，直到你快乐。

您还可以修改orbitSpeed沿着轨道路径，在各种各样的cameraAngle s加速和减速平稳骑行。这个过程称为“补间”，如果你想知道更多，你可以搜索“补间”或“补间”。我认为Three.js有补间，但从未考虑过。

哦，还请记住将相机的far属性设置为大于orbitRadius，否则您只会看到对象的前半部分，并且根据其内容可能看起来很奇怪。