how do I detect the OrbitControls camera is moving?

[marcelpi]

Hi there,

I'm trying to change the scale of some geometry based on how close the camera is to the object.
Before I can do that I need to know when the camera is moving and only then trigger the scaling.

I'm using OrbitControls to navigate around which provides an onChange event I can use to detect when the camera is moving and set the isMoving state to true. My problem is that by using onChange I don't know when the camera stops moving so I can set isMoving to false.

Any ideas on how it can be done?
Thanks.

[mwmwmw]

Basically, store the current position and rotation and check if it's the same on the next frame.

You can do that in a useFrame

Here is an example. I couldn't quite get the rotation measurement working. But that only matters at the poles if the camera is looking straight up or down.

But this should give you the overall idea
https://codesandbox.io/s/is-camera-moving-vxx3t1?file=/src/index.js

[marcelpi]

Yeah, that's how I first approached it.
However, I need to have frameloop='demand' on which means useFrame() will not run after the movement stops so it can compare coordinates. Check the sandbox: https://codesandbox.io/s/is-camera-moving-forked-jc8esu

Plus, the above method fails on camera's nadir and zenith points, where it just rotates without changing position. Of course, the code could be adapted to take rotation into consideration, but the useFrame() problem remains.

The easiest way would be to find out what event frameloop is looking at to determine whether OrbitControls detects a change and use that to deduce if the camera is moving, but I don't know how to do that.

[mwmwmw]

What about setting a timeout so that if you don't get another change event, it'll set isMoving to false.

https://codesandbox.io/s/is-camera-moving-forked-6xws78?file=/src/index.js

[mwmwmw]

The change event is fired from THREE.

https://github.com/mrdoob/three.js/blob/45d40e8f0036f9b812e931bfd8c877b775fdebf8/examples/jsm/controls/OrbitControls.js#L275

It's checking position and rotation 😆

[susiwen8]

I have posted a issue in threejs

[marcelpi]

Now that would solve it! It will just probably take a while until it's added.