CODEWITHSUNDEEP
javascriptthree.jswebgl
Mark t
Mark t

Reputation: 95

Smooth tranzition between camera points of view

I am trying to make a smooth transition between the different points of view of the camera (i made a cube for each point of view). The transition i am using is working at the moment but only for once, after which whenever a button is pressed it just jumps to the pointed cube with no transition. What i am looking for is an actual transition that can go smoothly to each cube (so if i want to go from top-left arrow to bottom-right arrow it should smoothly transition from the point we are at right now and not from a set point).

The code is kind of long but it is basically the same thing repeated for all 9 buttons(which is probably not the best 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);
    },
  });
}

Upvotes: 1

Views: 137

Answers (1)

sqrbrkt
sqrbrkt

Reputation: 131

All the transitions after the first one are going to the same camera position, {x: 0, y: 0, z: 0} which I think is why you’re not seeing the camera tweening.

I tried changing the destination position on a couple of buttons and I’m seeing transitions: https://jsfiddle.net/2x1d4kzv/1/

Re: best practice - yes your code could definitely be a lot DRYer!

Upvotes: 1

Related Questions