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

Question

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

在我的场景中，我有一个相机可以观察物体的质心。我有一些按钮，可以沿着围绕对象(恒定半径)的不可见球体在特定 View (前 View 、后 View 等)上设置相机位置。

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

有没有人知道如何实现这一目标？

感谢您的帮助!

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 s 更平稳的骑行。此过程称为“补间”，如果您想了解更多信息，可以搜索“补间”或“补间”。我认为 Three.js 有补间支持，但从未研究过它。

哦，还要记得设置你的相机的 far属性大于 orbitRadius或者您将只能看到对象的前半部分，并且根据它的内容，这可能看起来很奇怪。