Camera is not smoothly moving in tween.js?

Questions
1

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();
			    });
2

@prisoner849 , @trusktr any suggestion

3

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
4

camera.lookAt(scene.position) not working

wait I am giving you working example

5

here working fine

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

6

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

7

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);
			        })
8

int this example works fine , in my code not working

9

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

10

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

11

@Mugen87 , this is different questions

12

@prisoner849 , I think this issue

13

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
14

@Mugen87 ok sir , I will take care

15

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
17

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);
18

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
19

@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);
			        })
20

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.

21

without this line camera not going near to object.

without this line also working. which is best way?