I'm currently working on creating seamless transitions between different camera viewpoints by using cubes to represent each perspective. The transition is functional for the first click, but subsequent clicks abruptly jump to the designated cube without a smooth transition. I am seeking a solution that allows for fluid movement between each cube, starting from our current viewpoint rather than a preset location.
The code is somewhat lengthy as it repeats the same process for all 9 buttons, which may not be the most efficient practice.
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);
},
});
}