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的大小（大概是0°，90°，180°或270°），你需要围绕正确的平面旋转（我在上面的XY平面上旋转），你可以玩orbitRange和orbitSpeed，直到你开心为止。

您还可以在沿着轨道路径移动时修改orbitSpeed，在各种cameraAngle处加速和减速以获得更平稳的骑行。此过程称为“补间”，如果您想了解更多信息，可以搜索“补间”或“补间”。我认为Three.js有支持，但从未调查过。

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

THREE.js使用轨道路径围绕物体旋转相机

1 个答案: