0

このチュートリアル: https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/rotating-3d-shapesでは、3D 形状を作成して回転させる方法を示しています。processing.jsの代わりにjavascriptですべてを再作成することで手順に従いましたが、何らかの理由でこれらの機能を(javascriptで)実行できませんでした:

var rotateY3D = function(theta) {
   var sinTheta = sin(theta);
   var cosTheta = cos(theta);
   for (var n = 0; n < nodes.length; n++) {
      var node = nodes[n];
      var x = node[0];
      var z = node[2];
      node[0] = x * cosTheta - z * sinTheta;
      node[2] = z * cosTheta + x * sinTheta;
   }
};

これは私の試みでした：

var rotateZ3D = function (theta) {
        var sinTheta = Math.sin(theta);
        var cosTheta = Math.cos(theta);
        for (var n = 0; n<nodes.length; n++) {

            var x = nodes[n][0];
            var y = nodes[n][1];
            nodes[n][0] = x * cosTheta - y * sinTheta;
            nodes[n][1] = y * cosTheta + x * sinTheta;
        }
 }

誰かが私が間違っていることを教えてもらえますか?

4

1 に答える 1

0

最初の問題は、「sin」関数と「cos」関数の使用にありました。あなたthetaは度であり、JavaScriptの組み込みのものはラジアンを使用しています。

(必要に応じて、変換の詳細は質問のコメントに記載されています)

問題が周囲のコードにあることを修正した後。

(ここにコードのフィドルがあります: http://jsfiddle.net/bvqswvnL/1/ )

最初に回転の結果を確認するには、関数の後にdraw関数を呼び出す必要がありますrotateZ3D。

結果 (および関数の動作) を表示するsetIntervalために、ポイントが継続的に回転して描画されるように を追加しました。

また：

  • 変換が「積み重ならない」ようboard.restore();に、関数の最後にa を追加しました。draw
  • に変更(これが実際の意図だったと思いますboard.lineTo(node1[1], node1[1])。board.lineTo(node1[0], node1[1])

（これは結果http://jsfiddle.net/bvqswvnL/2/のフィドルです）

于 2015-08-07T16:57:32.387 に答える