Camera is not smoothly moving in tween.js?

Hello Members,
I am using tween.js for moving the camera. Its working fine but some time camera directly going to object see first two attempt. Camera is not going smoothly.see video

this is my code

            var posX =  -38.04300509409119;
		    var posY = 28.055926607250935;
		    var posZ = 71.50905877545551;
			
			 $('.clicks').click(function () {
			        var from = {
			            x: camera.position.x,
			            y: camera.position.y,
			            z: camera.position.z
			        };

			        var to = {
			            x: posX,
			            y: posY,
			            z: posZ
			        };
			        var tween = new TWEEN.Tween(from)
			            .to(to, 2000)
			            .easing(TWEEN.Easing.Linear.None)
			            .onUpdate(function () {
			            camera.position.set(this.x, this.y, this.z);
			            camera.lookAt(new THREE.Vector3(0, 0, 0));
			        })
			            .onComplete(function () {
			            	controls.target = new THREE.Vector3(-70.08574966294846, 13.725496743567325, 20.41311924509589);
			        })
			            .start();
			    });

@prisoner849 , @trusktr any suggestion

I can’t understand how action in .onUpdate() correlates with action in .onComplete().
Moreover, why do you call new in .onUpdate()?
I’d use camera.lookAt(scene.position) instead of camera.lookAt(new THREE.Vector3(0, 0, 0));, thus re-using one vector.
Do you have a working code example?

1 Like

camera.lookAt(scene.position) not working

wait I am giving you working example

here working fine

http://jsfiddle.net/sandipnd31/r4nctoxy/434/

camera.lookAt(scene.position); works as expected.
And the movement of the camera is smooth.

Same problem in this also

                        var tween = new TWEEN.Tween(from)
			            .to(to, 2000)
			            .easing(TWEEN.Easing.Linear.None)
			            .onUpdate(function () {
			            camera.position.set(this.x, this.y, this.z);
			            camera.lookAt(scene.position);
			        })

int this example works fine , in my code not working

only from some places not working , otherwise works fine, see video

@sandipnd31 Please avoid to create multiple posts at once! Instead, write your stuff into a single one.

@Mugen87 , this is different questions

@prisoner849 , I think this issue

You don’t understand. I don’t mean topics. I mean your countless replies in a single thread. That’s actually bad practice.

2 Likes

@Mugen87 ok sir , I will take care

I’ve changed the button’s click event function:

$('.clicks').click(function () {
        var from = camera.position.clone();
        var to = camera.position.clone().subScalar(100);
        var tween = new TWEEN.Tween(from)
            .to(to, 600)
            .easing(TWEEN.Easing.Linear.None)
            .onUpdate( function(){
              camera.position.copy(this);
              controls.update(); // update of controls is here now
            })
            .start();
    });

and animate() too:

function animate() {
    requestAnimationFrame(animate);
    TWEEN.update();
    renderer.render(scene, camera);
}

http://jsfiddle.net/prisoner849/r9vzm1uf/

1 Like

If I removed below line and used your code its working , but is it good practice?

 .onComplete(function () {
 	         	controls.target = new THREE.Vector3(-70.08574966294846, 13.725496743567325, 20.41311924509589);

I can’t get, why do you want such a quick shift of controls’ target from the center of the scene to another point.

1 Like

@prisoner849, solved , used following code

            var posX =  -102.01504501221221;
		    var posY = 39.4443135249698;
		    var posZ = 91.52025935468976;
			
			 $('.clicks').click(function () {
				 var from = camera.position.clone();
     
			         var to = {
			            x: posX,
			            y: posY,
			            z: posZ
			        }; 
			        var tween = new TWEEN.Tween(from)
			            .to(to, 1500)
			            .easing(TWEEN.Easing.Linear.None)
			            .onUpdate(function () {
			            	camera.position.copy(this);
			                controls.update();
			                controls.target = new THREE.Vector3(-2.3990653437361487, -3.4148881873690886, 54.09252756000919);
			        })

You can set controls.target = new THREE.Vector3(-2.3990653437361487, -3.4148881873690886, 54.09252756000919); once, before tweening. Now you call new in .onUpdate(), thus you create tens of THREE.Vector3() a second.

without this line camera not going near to object.

without this line also working. which is best way?