1

ここに画像の説明を入力

画像で表された 3D ポイントを 3D 長方形に描画したいと思います。これらをx、y、z軸でどのように表現できますか

ここで、投影タイプは正投影です。

ありがとう

4

3 に答える 3

3

わかった。達成しようとしていることの簡単な例と、なぜこれがそれほど複雑な問題なのかを見てみましょう。

まず、いくつかの射影関数を見てみましょう。3D (またはそれ以上の次元) の点を 2D 空間 (モニター) または投影に変換する方法を数学的に記述する方法が必要です。

最も理解しやすいのは、非常に単純な二等分図法です。何かのようなもの：

x' = x + z/2;
y' = y + z/4;

これは何を意味するのでしょうか？さて、x'あなたは x 座標の 2D射影ですか。空間内で後方に移動する単位ごとに、射影はその点をその半分の単位だけ右に移動します。Andは、y 座標に対する同じ投影を表します。空間内で後方y'に移動する単位ごとに、投影はその点を 4 分の 1 単位上に移動します。

したがって、 の点は[0,0,0]の 2 次元の点に投影され[0,0]ます。willの点[0,0,4]は の 2 次元の点に投影され[2,1]ます。

JavaScript で実装すると、次のようになります。

// Dimetric projection functions
var dimetricTx = function(x,y,z) { return x + z/2; };
var dimetricTy = function(x,y,z) { return y + z/4; };

これらの投影関数 (または 3D 空間から 2D 空間に変換する方法) を取得したら、それらを使用して画像の描画を開始できます。js canvas を使用した簡単な例です。まず、いくつかのコンテキストについて:

var c = document.getElementById("cnvs");
var ctx = c.getContext("2d");

それでは、3D ポイントを描画するための小さなヘルパーを作成しましょう。

  var drawPoint = (function(ctx,tx,ty, size) {
    return function(p) {
      size = size || 3;

      // Draw "point"
      ctx.save();
      ctx.fillStyle="#f00";
      ctx.translate(tx.apply(undefined, p), ty.apply(undefined,p));
      ctx.beginPath();
      ctx.arc(0,0,size,0,Math.PI*2);
      ctx.fill();
      ctx.restore();
    };
  })(ctx,dimetricTx,dimetricTy);

これは非常に単純な関数です。キャンバス コンテキストを as として注入しています。ctxこの場合は、前に見た dimetric 関数です。txty

そして今、多角形の引き出し:

  var drawPoly = (function(ctx,tx,ty) {
    return function() {
      var args = Array.prototype.slice.call(arguments, 0);

      // Begin the path
      ctx.beginPath();

      // Move to the first point
      var p = args.pop();
      if(p) {
        ctx.moveTo(tx.apply(undefined, p), ty.apply(undefined, p));
      }

      // Draw to the next point
      while((p = args.pop()) !== undefined) {
        ctx.lineTo(tx.apply(undefined, p), ty.apply(undefined, p));
      }

      ctx.closePath();
      ctx.stroke();

    };
  })(ctx, dimetricTx, dimetricTy);

これらの 2 つの関数を使用すると、探している種類のグラフを効果的に描画できます。例えば：

// The array of points
var points = [
  // [x,y,z]
  [20,30,40],
  [100,70,110],
  [30,30,75]
];

(function(width, height, depth, points) {
  var c = document.getElementById("cnvs");
  var ctx = c.getContext("2d");

  // Set some context
  ctx.save();
  ctx.scale(1,-1);
  ctx.translate(0,-c.height);

  ctx.save();

  // Move our graph
  ctx.translate(100,20);  

  // Draw the "container"
  ctx.strokeStyle="#999";
  drawPoly([0,0,depth],[0,height,depth],[width,height,depth],[width,0,depth]);

  drawPoly([0,0,0],[0,0,depth],[0,height,depth],[0,height,0]);
  drawPoly([width,0,0],[width,0,depth],[width,height,depth],[width,height,0]);
  drawPoly([0,0,0],[0,height,0],[width,height,0],[width,0,0]);
  ctx.stroke();

  // Draw the points
  for(var i=0;i<points.length;i++) {
    drawPoint(points[i]);
  }

})(150,100,150,points);

ただし、実際の質問の複雑さの一部が明らかになり始めることができるはずです。つまり、あなたは回転について尋ねました。この例では、深さとその x、y 位置への影響との間の単純化された関係以外にはあまり必要のない、非常に単純な投影 (私たちの二量投影) を使用しています。投影がより複雑になるにつれて、合理的な 2D 投影を作成するために、3D 空間での関係/方向についてさらに知る必要があります。

上記のコードの実際の例は、ここにあります。この例には、グラフの外観がどのように変化するかを確認するために、等角投影関数を等角投影関数と交換することもできます。また、実際の向きを「視覚化」するのに役立つ「影」の描画など、ここには含めなかったいくつかの異なる視覚化機能も実行します。これは、3D から 2D への投影の制限です。

複雑で、表面的な議論でさえ、このスタックオーバーフローの範囲を超えています。3D の背後にある数学についてもっと読むことをお勧めします。オンラインでも印刷物でも、たくさんのリソースがあります。数学がどのように機能するかの基本をよりしっかりと理解したら、具体的な実装に関する質問がある場合は、ここに戻ってください。

于 2012-09-04T19:43:02.517 に答える
2

あなたがやりたいことは、あなたが述べた方法を使用して行うことは不可能です-これは、ボックスが3次元で回転すると、あなたの図のようには見えないためです. また、必要な投影のタイプによっても異なります。ただし、Javascript 用の 3D 描画ライブラリであるthree.jsを使用して開始することはできます。

お役に立てれば。

于 2012-09-04T17:56:11.493 に答える
1

3D 長方形を描画するには? 投稿場所: 平行四辺形 | 更新日: 2012 年 9 月 14 日

3 次元の長方形をスケッチするということは、2 次元の図形とは異なる図形を扱っていることを意味します。2 次元の図形では、それらを表すために 3 つの軸が必要になります。では、3D の長方形を描画するにはどうすればよいでしょうか。

まず、英語の「t」の文字を表すように、紙の中央に縦と横の 2 本の線を作成します。これは、一時的に使用するために描画する必要があるものであり、後で 3 次元の長方形の構築が完了した後に削除されます。次に、各辺が 1 インチの正方形を描きます。それぞれのコーナーで形成される 90 度の角度が正確に測定されるように、正方形はジオメトリで完全でなければなりません。次に、正方形の右上隅から開始して、45 度の角度で方向に 2 インチの長さに引き伸ばされる線分を描画します。同様に、正方形の左上隅から別の線分を引き、45 度の角度で 2 インチの長さに伸ばすことで、この手順を繰り返します。これらの 2 つの線分は、開始時に一時的に引いた水平線に対する対角線と見なされます。また、これらの線は互いに平行になります。次に、これら 2 つの対角線の終点を結ぶ線を引きます。

次に、2 インチの対角線の終点の右端から開始して、一時的な水平線に垂直になる 1 インチの測定線を引きます。次に、正方形の左下隅を、4 番目のステップで描いた最後の 1 インチの線の終点と結合する必要があり、最終的に 3 次元の長方形が得られます。これで、最初の「t」を消去できます。この 3D の長方形は、立方体に似ています。

于 2013-03-11T21:31:53.197 に答える