회전 된 화살표를 직선으로 이동

Question

회전 할 수있는 화살표를 직선으로 이동하려고합니다. 올바른 공식을 찾는 데 어려움이 있습니다. 아마 사인과 코사인이 포함되어야한다는 것을 알고 있지만, 다양한 구성을 시도하고 작동하는 것을 얻을 수 없었습니다. 여기

는 화살표 내 장면의 사진과 나비의

rotateNumber (1 왼쪽 회전) -1과 같은 정수, 0 (회전), 1 (1 개 우회전) 등이다

rotateAngle은 기본적으로 10도입니다. 여기

if (arrowMoving) { 
     var rAngle = rotateAngle * rotateNumber; 
     var angleInRad = rAngle * (Math.PI/180); 
     var stepSize = 1/20; 
     arrowX += stepSize * Math.cos(angleInRad); 
     arrowY += stepSize * Math.sin(angleInRad); 
     DrawArrowTranslate(arrowX, arrowY); 
     requestAnimFrame(render); 
    } else { 
     DrawArrow(); 
     arrowX = 0; 
     arrowY = 0; 
    } 

화살표를 그리고 변환하는 코드입니다 : 여기

화살표를 이동하는 코드의

function DrawArrowTranslate(tx, ty) { 
    modelViewStack.push(modelViewMatrix); 

    /* 
    var s = scale4(0.3, -0.7, 1); 
    var t = translate(0, -4, 0); 
    */ 
    var s = scale4(0.3, -0.7, 1); 
    var t = translate(0, -5, 0); 
    var t2 = translate(0 + tx, 1 + ty, 0) 

    // rotate takes angle in degrees 
    var rAngle = rotateAngle; 

    var r = rotate(rAngle, 0, 0, 1); 

    var m = mult(t, r); 
    var m = mult(m, t2); 
    modelViewMatrix = mat4(); 
    modelViewMatrix = mult(modelViewMatrix, m); 
    modelViewMatrix = mult(modelViewMatrix, s); 

    /* 
    // update bounding box 
    arrowBoundingBox.translate(0, -5); 
    arrowBoundingBox.rotate(rAngle); 
    arrowBoundingBox.translate(0, 1); 
    arrowBoundingBox.scale(0.3, -0.7); 
    */ 

    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix)); 
    gl.drawArrays(gl.LINE_STRIP, 1833, 4); 
    gl.drawArrays(gl.LINE_STRIP, 1837, 4); 

    modelViewMatrix = modelViewStack.pop(); 
} 

Answer 1

코드는 매우 정확 보이지만, 당신은의 사용을 제거한다 rotateNumber. 회전에 대해 양수 및 음수 각도를 대신 사용할 수 있습니다. 여기에서 오류의 원인이 무엇인지 생각하지 않아도됩니다. Sin과 Cos는 양의 값, 음의 값 또는 0의 각도를 확실히 처리 할 수 ​​있습니다. 행운을 빈다!

Answer 2

문제를 발견했습니다. 나는 회전이 회전을 엉망으로 만들면서 회전하기 전에 번역 할 필요가있을 때 회전 후에 번역을하고있었습니다.