摄像机视点之间的平滑过渡答案

【问题标题】：Smooth tranzition between camera points of view摄像机视点之间的平滑过渡
【发布时间】：2021-10-26 18:06:57
【问题描述】：

我正在尝试在相机的不同视角之间进行平滑过渡（我为每个视角制作了一个立方体）。我正在使用的过渡目前正在工作，但只工作一次，之后只要按下按钮，它就会跳转到没有过渡的尖头立方体。我正在寻找的是一个可以顺利过渡到每个立方体的实际过渡（因此，如果我想从左上箭头到右下箭头，它应该从我们现在所在的点平滑过渡，而不是从一组点）。

代码有点长，但基本上所有 9 个按钮都重复相同的内容（这可能不是最佳做法）。

https://jsfiddle.net/z9v3jwnk/

var aabb = new THREE.Box3().setFromObject(cube);
var center = aabb.getCenter(new THREE.Vector3());
var size = aabb.getSize(new THREE.Vector3());

document.getElementById("but").addEventListener("click", but);

function but() {
  gsap.to(camera.position, {
    duration: 1,
    x: 0,
    y: 0,
    z: 0,
    onUpdate: function () {
      camera.lookAt(center);
    },
  });
}

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

第一个转换之后的所有转换都将转到相同的相机位置，{x: 0, y: 0, z: 0}，我认为这就是您看不到相机补间的原因。

我尝试在几个按钮上更改目标位置，但我看到了过渡：https://jsfiddle.net/2x1d4kzv/1/

回复：最佳实践 - 是的，您的代码肯定会很多 DRYer！

【讨论】：

你是对的，如果我修改相机位置，我会得到一个过渡，但不是我正在寻找的过渡。我希望转换发生在相机正在看的东西上，所以相机的位置保持不变（这就是为什么我为所有人设置 0,0,0）但它改变了它的焦点。所以它就像一个圆圈，中间有摄像头，你可以有一个过渡（朝向任何按下的箭头/立方体）。
啊，也许这会有所帮助：stackoverflow.com/questions/65012960/…
我没有特定的 three.js 经验，但您可能会采取一种方法是创建一个目标对象，当单击按钮时，该对象在每个中心之间进行补间。然后让相机一直看着目标，让目标不可见。
这正是我的想法，但一开始似乎太奇怪了。为了简化，我尝试只用 2 个按钮（左右一个）来实现它，但我只能跳到下一个地方，并且不能顺利进行。我将时间的增量值设置为 +=0.01，但在执行时它只是跳到下一个位置。 jsfiddle.net/e3r57afh/4 。关于如何逐渐增加时间变量以便它在一段时间内消失（所以它每 0.01 秒增加 0.01）的任何想法？
那个小提琴里的js有点混乱，我认为主要是因为你没有使用animate应该使用它的方式。首先，您尝试增加 time 的方式不会像您预期的那样工作 - do {...} while (...) 循环将在不更新屏幕的情况下尽可能快地运行。