smooth camera zoom in/out animation on mousewheel

Questions
,
1

can anyone help me out how can i get zoom in camera animation which defined in linked below

@mrdoob ?

2

I think, Bruno Simon could help you…

If you ask me, I would use OrbitControls or GSAP or other animation library, to manipulating camera. That relatively simple.

1 Like
3

where can i contact him

4

thanks for contri… can you also explain me how can i do smooth scroll animation like user stop scroll but its animate slowly little more ??

5

Well… You took my words a little too literally… when you buy his course, then you will get access to Discord, and I am sure that you will get help there. Because he created experience which link you provided.

Or like I wrote, you can try implement this by yourself, is not so hard.

Take a look

https://threejs.org/docs/#examples/en/controls/OrbitControls

1 Like
6

i got you !

1 Like
7 
function dollyOut(dollyScale, scrollStrength) {
			if (scope.object.isPerspectiveCamera) {
				targetScale /= dollyScale;
				targetScale = Math.max(0.5, Math.min(3, targetScale)); // Clamp targetScale within the range

				// Create a GSAP timeline
				const timeline = gsap.timeline();

				// Add zoom animation to the timeline
				timeline.to(scope.object, {
					duration: 1,
					ease: "power2.out",
					zoom: targetScale,
					onUpdate: () => {
						scope.object.updateProjectionMatrix()
						console.log('DOLLY OUT UPDATE')
						scope.object.lookAt(scope.target); // Keep camera looking at the center
						scope.object.translateY(-0.005); // Lift up the camera slightly
					}
				});

			} else if (scope.object.isOrthographicCamera) {
				let newZoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale));
				gsap.to(scope.object, { duration: 2, ease: "power2.out", zoom: newZoom, onUpdate: () => scope.object.updateProjectionMatrix() });
				zoomChanged = true;
			} else {
				console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
				scope.enableZoom = false;
			}
		}

		function dollyIn(dollyScale, scrollStrength) {
			if (scope.object.isPerspectiveCamera) {
				targetScale *= dollyScale;
				targetScale = Math.max(0.5, Math.min(3, targetScale)); // Clamp targetScale within the range

				// Create a GSAP timeline
				const timeline = gsap.timeline();

				// Add zoom animation to the timeline
				timeline.to(scope.object, {
					duration: 1,
					ease: "power2.out",
					zoom: targetScale,
					onUpdate: () => {
						scope.object.updateProjectionMatrix()
						console.log('DOLLY IN UPDATE')
						scope.object.lookAt(scope.target); // Keep camera looking at the center
						scope.object.translateY(0.005); // Lift up the camera slightly
					}
				});

			} else if (scope.object.isOrthographicCamera) {
				let newZoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
				gsap.to(scope.object, { duration: 2, ease: "power2.out", zoom: newZoom, onUpdate: () => scope.object.updateProjectionMatrix() });
				zoomChanged = true;
			} else {
				console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
				scope.enableZoom = false;
			}
		}

these are my zoom in / out animation on wheel event , but confuse regarding tiltcamera animation with it , another thing should i use zoom or move camera to the targeted point ?

@Lukasz_D_Mastalerz

8

It’s hard to say clearly whether you should zoom the camera or move it. Without the whole picture, it’s like asking what is better: perspective camera or orthoghrafic camera? Depends on the overall shape of the scene… Both the zoom and move implementations will be relatively simple since you are already using GSAP. As for tilt, I don’t really understand… do you want to combine the zoom/move animation with the tilt camera?

9

im clear about that i need to use perspective camera, but bit confused should i zoom camera or move camera to that position, with moving camera my animation is not much smooth like i got result from zooming but problem is my tilt camera is not sync with camera + i dont understand also how to sync with the user scroll strength ,

your question: do you want to combine?
answer: yes