Animate camera.zoom and controls.target

Questions
,
1

I’m trying to animate camera.zoom (or something similar if there’s a better option) and controls.target (using Orbit Controls) on an event.

At this point I’ve got a (click)event that executes the following code

camera.zoom = 2; 
camera.updateProjectionMatrix();

controls.target.set(orbs[i].position.x,orbs[i].position.y,orbs[i].position.z );

I’ve tried animating these using GSAP, but couldn’t figure out how to make this work.

2

Something like this: https://jsfiddle.net/rsf3h9yo/1/

Relevant code is:

gsap.to( camera, {
	duration: 2,
	zoom: 2,
	onUpdate: function () {
	
		camera.updateProjectionMatrix();
	
	}
} );

gsap.to( controls.target, {
	duration: 2,
	x: 10,
	y: 0,
	z: 0,
	onUpdate: function () {
	
		controls.update();
	
	}
} );
2 Likes
3

Perfect! Thank you.