三.js动画控制答案

【问题标题】：Three.js animation control三.js动画控制
【发布时间】：2014-06-13 19:14:43
【问题描述】：

我将搅拌机动画导入到 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;

}

【问题讨论】：

标签： javascript three.js

【解决方案1】：

所以，我用讨厌的方式解决了我的问题，向“animation.currentTime”添加了一些条件，其中我的动画长度为 3.75。但它没有回答为什么我的动画增量时间浮动。

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;
  }

如果有人知道更好的方法，请给我一些建议。

【讨论】：