TrackballControls with Collada kfAnimation Three JS - three.js

Question

Hi guys I am working with kfAnimation animation from a Collada model. I want to include a trackball controls but when I do I exceed the size stack I dont know why my code is the following
function init() {
initRender();
// Camera
initCamera();
// Scene
initScene();
//controlls
initControls();
initGrid();
loadObjectAnimatedFrames();
window.addEventListener( 'resize', onWindowResize, false );
}
function loadObjectAnimatedFrames(){
loader = loader.load( 'sources/crack-animated.dae', function ( collada ) {
model = collada.scene;
animations = collada.animations;
kfAnimationsLength = animations.length;
//model.scale.x = model.scale.y = model.scale.z = 0.125; // 1/8 scale, modeled in cm
for ( var i = 0; i < kfAnimationsLength; ++i ) {
var animation = animations[ i ];
var kfAnimation = new THREE.KeyFrameAnimation( animation );
kfAnimation.timeScale = 1;
kfAnimations.push( kfAnimation );
}
start();
animate( lastTimestamp );
scene.add( model );
});
}
function initControls(){
controls = new THREE.TrackballControls(camera);
controls.minDistance = 100;
controls.maxDistance = 1800;
controls.addEventListener('change',render);
}
function animate( timestamp ) {
var frameTime = ( timestamp - lastTimestamp ) * 0.001;
if ( progress >= 0 && progress < 48 ) {
for ( var i = 0; i < kfAnimationsLength; ++i ) {
kfAnimations[ i ].update( frameTime );
}
} else if ( progress >= 48 ) {
for ( var i = 0; i < kfAnimationsLength; ++i ) {
kfAnimations[ i ].stop();
}
progress = 0;
start();
}
//pointLight.position.copy( camera.position );
progress += frameTime;
lastTimestamp = timestamp;
render();
}
I tried to put controls update inside animate and start function but I think it consumed a lot of resources. Also I tried to put inside render but same results.
Thanks for your help I hope some more experimented can help me.

Answer 1

Finally I found the solution and it was an option enableDamping and dampingFactor
function initControls(){
controls = new THREE.TrackballControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
}
after this I just add controls.update();
renderer.render( scene, camera );
requestAnimationFrame( animate );