直線移動旋轉的箭頭

我試圖將直線上的箭頭可以旋轉。我有一些困難提出使用正確的公式。我知道它應該可能涉及正弦和餘弦，但我已經嘗試過各種配置，並且無法獲得可行的結果。直線移動旋轉的箭頭

這裏是我的場景用箭頭圖片和弓

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

來源

2017-10-14 Suerg

你的代碼看起來很正確，但你應該避免使用的rotateNumber。您可以使用正面和負面的角度進行旋轉，而不是在這裏我想象的是錯誤的原因。 Sin和Cos當然可以處理任何幅度的正面，負面或零角度。祝你好運！

來源

2017-10-14 20:51:25 Hallsville3

注意：考慮單位圓以及正向角度是如何逆時針旋轉的，從直接指向裂縫開始。 – Hallsville3

我已經改變它來消除rotateNumber，它仍然無法正常工作。如果完全指向左側，它會起作用，否則它會向錯誤的方向移動。例如，在沒有旋轉的情況下，它會直接向右移動而不是直線移動。 – Suerg

在你的座標系統中，左上角是（0,0） – Hallsville3

我想出了這個問題。在旋轉之後，我需要翻譯之前我正在翻譯，因爲旋轉造成翻譯錯亂。

來源

2017-10-14 22:17:41 Suerg

太棒了！我想知道這是否與翻譯被Webgl一路上的某些事情搞砸了。我很高興你得到它的工作 – Hallsville3

旋轉之後或之前應用翻譯是實現變革的兩個重要途徑。但在第一種情況下（旋轉後翻譯：T * R），它執行我們稱之爲局部空間中的平移，所以說：沿着矩陣軸，由旋轉修改的軸。這有時非常有用。 – 2017-10-15 14:04:01

直線移動旋轉的箭頭

回答

相關問題