以直线

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当然可以处理任何幅度为正，负或零的角度。 祝你好运！

Answer 2

我弄明白了这个问题。旋转之后，当我需要在旋转之前进行平移时，我正在进行平移，因为旋转正在弄乱翻译。