Camera or Model jumping after tween finishes

Questions
1

So a few days ago I asked about making orbit controls zoom in and out I managed to get the camera to do this but now I face a new problem.
The new problem is after the camera and controls finish tweening the camera (or it might be the model) jumps a little does anyone know why and what is causing this?

What I have tried:
I thought it might be object.lookAt so I tried this:

var startRotation = new THREE.Euler().copy( camera.rotation );
camera.lookAt( controls.object.position );
var endRotation = new THREE.Euler().copy( camera.rotation );
camera.rotation.copy( startRotation );
new TWEEN.Tween(camera.rotation).to({x: endRotation.x, y: endRotation.y, z: endRotation.z}, 600).start();

Didn’t work so then I thought well maybe it’s object.position or object.zoom so I tried this:

	var tweenPositionToReset = new TWEEN.Tween( controls.object.position )
    .to( { x: controls.position0.x, y: controls.position0.y, z: controls.position0.z }, 1000 )
    .easing(TWEEN.Easing.Quadratic.InOut)
     .onComplete(function() {
                })
    .start();
    
var tweenPositionToReset3 = new TWEEN.Tween( controls.object.zoom )
    .to( { x: controls.zoom0.x, y: controls.zoom0.y, z: controls.zoom0.z }, 1000 )
    .easing(TWEEN.Easing.Quadratic.InOut)
     .start();

That didn’t work

Has anyone got any idea’s to how to solve this?

bandicam 2020-06-27 09-44-57-322

Here is a codepen there is a white button right in the top Left to reset the scene (hard to see):

Thanks in advance!

Edit: the above video of the problem doesn’t show up so if that’s the same for anyone else here is the problem in youtube format: https://www.youtube.com/watch?v=ns_JHwpf7uk

2

I’m starting to wonder if this is a glitch with tween js ? I’ve tried a few other things and still the same outcome is it possible this is a bug from tween js?

3

Still struggling on this anyone have any idea’s?

4

I never have problems with tweening.
See these examples, specifically the tweening code.

Nested tweens

Tweening an animated GLTF
https://sbcode.net/threejs/tween-animation-mixer/
You can view the source of this example at https://sbcode.net/extra_html/tween-animation-mixer.html

And also see my page showing the different tween easing options
https://sbcode.net/threejs/tween/#tween-easing-options

1 Like
5

Could you take a look at my pen I can’t see what I am doing wrong

6

Hi,

Did you manage to solve this glitching effect in Tween?
I am experiencing the same issues and it looks like it’s resetting the controls.target of the orbit controls to 0,0,0.

Hopefully you can help me out with this!

Best,

7

In the end I ended up using gsap much more efficient and less issues basically does what you tell it to unlike tween

8

I got the same behaviour.

9

Same problen gsap TWEEN tween

right after gltf animation the camera do a jump