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

Question

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

代码有点长，但基本上对所有 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);
    },
  });
}

Answer 1

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

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

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

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

Smooth tranzition between camera points of view

javascript

three.js

webgl