Detect changes of camera properties via OrbitControls

Questions
#1

Hello. I have an app using three js. I am using ortographic camera and Orbit controls. I want to fire event whenever zoom or position of camera is changing. What is the best way to do it? Should I constantly check these parameters in animate loop?

#2

You can use this approach:

controls.addEventListener( 'change', render );

This pattern is used many times in the examples for instance:

https://threejs.org/examples/webgl_loader_gltf

1 Like
#3

thank you so much;)

#4

Hi Mugen87,

I have a similar problem. Is there a way to only listen to the zoom and not the pan/move?
I need this in order to scale some objects when the camera is zooming in/out.

Thanks man,

#5

Unfortunately, this is only possible if you modify OrbitControls. I guess it should work if you change the following code section in update() from:

if ( zoomChanged ||
	lastPosition.distanceToSquared( scope.object.position ) > EPS ||
	8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {

	scope.dispatchEvent( changeEvent );

	lastPosition.copy( scope.object.position );
	lastQuaternion.copy( scope.object.quaternion );
	zoomChanged = false;

	return true;

}

to

if ( zoomChanged ) scope.dispatchEvent( changeEvent );

if ( zoomChanged ||
	lastPosition.distanceToSquared( scope.object.position ) > EPS ||
	8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {

	lastPosition.copy( scope.object.position );
	lastQuaternion.copy( scope.object.quaternion );
	zoomChanged = false;

	return true;

}

The change event will then only fire if the zoom is changed. You could also consider to introduce a new event type (e.g. zoomChanged) for this use case.

1 Like
#6

Thanks for replying. That’s a good point, the only problem I see is I’ll have to change the orbit-controls.js whenever I update the library.

Is there a way to intercept mouse and touch presses that trigger a zoom through a component? If so, do you have an idea how?

#7

Um, not sure how this would look like…

#8

For example I could emit an event when the third mouse button is pressed or the mouse wheel used, both of which tell orbit-controls to start zooming and employ it to scale my objects. What do you think?

#9

I did it by detecting the inputs that trigger the zooming/dollying, namely the 2nd mouse button, wheel and touch events.

#11

I have tried to put zoom in and zoom out button.
Logic is working fine but editor is not updating with zoom click.
But after click on the screen it shows the changes.
Can Anyone help me with this ?