时间戳

首页 > 解决方案 > 摄像机视点之间的平滑过渡

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

问题描述

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

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

标签： javascriptthree.jswebgl

解决方案

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

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

回复：最佳实践 - 是的，你的代码肯定会很干燥！

推荐阅读