Three.js动画控件

时间:2014-06-13 09:55:20

标签: javascript three.js

我将blender动画导入到three.js。我想使用垂直滑块“id =#roof_angle”来控制动画。因此,如果我向上/向下拖动我的滑块,则向前/向后移动动画。第一次运行时一切正常。我可以上下移动。如果我播放的时间有点长,我的动画会开始错过我的酒吧位置。如何解决这个问题?我错过了什么? 动画有90帧,条形高度为504px。

我的代码

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;

}

1 个答案:

答案 0 :(得分:0)

所以,我用讨厌的方式解决了我的问题,为动画长度为3.75添加了一些条件。#34; animation.currentTime&#34;但它并没有回答为什么我的动画增量时间浮动。

function onDocumentMouseMoveY( event ) {
        delta_mouseY = last_positionY - event.clientY;
        roofAngle = $( "#roof_angle" ).slider( "option", "value")
        timeFrameDelta = 1/24*(90/504)*delta_mouseY;


        if(delta_mouseY >= 1){
            if(roofAngle >= 0 && roofAngle < 90 && animation.currentTime+timeFrameDelta < 3.75){
                roofAngle ++;
                animation.update(timeFrameDelta);
            }
        }
        if(delta_mouseY < 0){
            if (animation.currentTime < 0){
                animation.currentTime = 0;
            }
            if(roofAngle > 0){
                animation.update(timeFrameDelta);
                roofAngle --;
            }
        }

        last_positionY = event.clientY;
  }

如果,有人知道更好的方式请求给我一些提示。