Multiple animate function instances causing trouble in wind function

[tejasnayak25]

  Overriding the "[VRMSpringBoneJointSettings.gravityDir](https://pixiv.github.io/three-vrm/packages/three-vrm/docs/interfaces/VRMSpringBoneJointSettings.html#gravityDir)"  can be used to create a wind-like effect.

const clock = new THREE.Clock();
clock.start();

const windDir = new THREE.Vector3( 0, - 1, - 1 );
const applyWind = ( vrm, t ) => {
  const windPower = ( Math.sin( t * Math.PI / 3 ) + 1 ) / 2;
  vrm.springBoneManager.joints.forEach( e => {
    e.settings.gravityDir = windDir;
    e.settings.gravityPower = windPower;
  } );
};

function animate() {
  requestAnimationFrame( animate );
  // update vrm components
  if ( currentVrm ) {
    applyWind( currentVrm, clock.elapsedTime );
    currentVrm.update( clock.getDelta() );
  }
  // render
  renderer.render( scene, camera );
}

Originally posted by @ke456-png in #1134 (comment)

The above mentioned comment helped me to create a function which lets me add wind to the characters.
It looks like this

function wind(currentvrm, condition) {
const clock = new THREE.Clock();
clock.start();

const windDir = new THREE.Vector3( 0, - 1, - 1 );
const applyWind = ( vrm, t, condition ) => {
if(condition){
  vrm.springBoneManager.joints.forEach( e => {
    e.settings.gravityDir = windDir;
  } );
} else {
vrm.springBoneManager.joints.forEach( e => {
    e.settings.gravityDir = new THREE.Vector3( 0, 0, 0 );
  } );
}
};

const applyWindPower = ( vrm, t , condition) => {
  const windPower = ( Math.sin( t * Math.PI / 3 ) + 1 ) / 2;
if(condition){
  vrm.springBoneManager.joints.forEach( e => {
    e.settings.gravityPower = windPower;
  } );
} else {
vrm.springBoneManager.joints.forEach( e => {
    e.settings.gravityPower = 0;
  } );
}
};

function animate() {
  requestAnimationFrame( animate );
  // update vrm components
  if ( currentVrm ) {
    applyWindPower ( currentVrm, clock.elapsedTime, condition );
    currentVrm.update( clock.getDelta() );
  }
}
applyWind( currentVrm, clock.elapsedTime, condition );
animate();
}

The first time I call the function it works and the animation is having no issues.
But the second time I call the same function with false condition it runs multiple animate function instances causing no issues again. The character's outfits are back to position.
But the third time I call it with the true condition it runs three instances of the animate function simultaneously with two true and one false value.
This causes lagging in the animation.
And also the rotation set to the characters body parts are set back to normal.
Can't apply rotation.

I'm passing the condition argument from checkbox.checked value.

How can I stop the multiple instances?