Hi,
I’m quite new to three js and would like to create some effect with the camera. I am currently using orbitcontrols, and would like to lock to rotation to some angle. I used the max / min polar/azimuthal angles but I find the transition really hard when these limits are met.
I would like to create a camera with an initial position, with some angle limit but as this limit gets approached, the camera moves less and less. When the mouse is released, the camera would gently come back to its initial position. All of this is as the camera was attached to a spring that stretches as the camera moves away from its original position. (Sorry if my explanations are a bit fuzzy, it’s quite difficult to explain, don’t hesitate to ask for details if I’m not clear 
)
Any idea on how to do that or some library that already implements what I tried to describe?
Have a good day !
Fana
I think I understand what you’re trying to achieve, but you are stretching the “spring”-analogy a bit too far, imo:
A 2D-computer mouse generates signals (events) as long as it’s moved.Technically there is no difference between “not moving” the mouse, while still holding it, and “releasing” the mouse, i.e. taking your hand off of it. A computer program cannot tell the difference between the two.
What you can do is, vary the speed of your mouse movement, and process that into the equivalent of a force, proportional to the speed of mouse movement.
For the spring effect to be halfway realistic, its restoring force would have to be proportional to the camera’s extension from the neutral position.
Then, in a final step, you would have to compare for every frame the mouse-generated force-equivalent to the restoring force of the spring, given by its current extension from the neutral position.
Any imbalance between the two forces would have to be translated into a camera movement into the direction of the prevailing force, until a new equilibrium is reached.
Be prepared, that you’ll have to keep moving the mouse to maintain a fixed extension of the camera from its neutral position, which is not sustainable because you’ll eventually reach the end of your mousepad and/or desk …
i had the same problem and wrote myself my own https://github.com/pmndrs/drei#presentationcontrols it’s based on spring physics.
here’s a simple demo: https://kheke.csb.app
and this one has snap-back (mouse release): https://qyz5r.csb.app
this is react, but the source is here, maybe you can re-use some of the math drei/PresentationControls.tsx at 2d5a330199b4c40fd72d3c7b543074f1f4c31246 · pmndrs/drei · GitHub
1 Like
Thank you @vielzutun.ch and @drcmda for your help ! What drcmda proposes is exactly what I had in mind, will take a look at the source code with what vielzutun presented, I’m still new to web development and must take a deep dive into mouse events!
Have a great day,
Fana