I have a Blender animation imported into three.js and I am trying to control the animation using a vertical slider bar with the ID "#roof_angle". As I drag the slider up or down, the animation should go forward or backward. Everything works fine initially, but after some time, the animation starts to lose track of the slider position. How can I fix this issue? What am I missing? The animation consists of 90 frames and the height of my slider bar is 504px.
Here is my code:
function onDocumentMouseDownY( event ) {
document.addEventListener( 'mousemove', onDocumentMouseMoveY, false );
last_positionY = event.clientY;
}
function onDocumentMouseMoveY( event ) {
delta_mouseY = last_positionY - event.clientY;
roofAngle = $( "#roof_angle" ).slider( "option", "value")
if(delta_mouseY >= 1){
if(roofAngle >= 0 && roofAngle < 90 ){
roofAngle ++;
animation.update(1/24*(90/504)*delta_mouseY);
}
}
else{
if(roofAngle > 0){
animation.update(1/24*(90/504)*delta_mouseY);
roofAngle --;
}
}
last_positionY = event.clientY;
}