基于如何在x，y和z在3D的矩形画线？ [英] How to Draw line in 3D rectangle based on x,y and z?

问题描述

我想提请3D点psented在图像三维矩形重新$ P $。任何想法，我怎么可能再present这些在X，Y和Z轴

I would like draw 3D points represented in image to 3D rectangle. Any idea how could I represent these in x,y and z axis

下面投影式为正交。

感谢

推荐答案

好。让我们来看看，你要完成它是什么，以及为什么这是这样一个复杂的问题，一个简单的例子。

Okay. Let's look at a simple example of what you are trying to accomplish it, and why this is such a complicated problem.

首先，让我们来看一个有些投影功能。你需要一种方法来数学方法描述如何将一个三维（或更高维）点进一个二维空间（显示器），或预测的。

First, lets look a some projection functions. You need a way to mathematically describe how to transform a 3D (or higher dimensional) point into a 2D space (your monitor), or a projection.

要了解的simpiest是一个非常简单的dimetric投影。是这样的：

The simpiest to understand is a very simple dimetric projection. Something like:

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

这是什么意思？好了， X'是X坐标2D的预测的：每部移动的向后的空间，在预测的将移动该点半，很多单位对右键的。而 Y'重presents是相同的投影为您的y坐标：为移动的每个单元向后的空间，在预测的会移动的点有四分之一单元的了的。

What does this mean? Well, x' is you x coordinate 2D projection: for every unit you move backwards in space, the projection will move that point half that many units to the right. And y' represents that same projection for your y coordinate: for every unit you move backwards in space, the projection will move that point a quarter unit up.

因此​​，一个点 [0,0,0] 将获得投影到二维点的[0,0] 。一个点 [为0,0,4] 将获得投影到二维点的[2,1] 。

So a point at [0,0,0] will get projected to a 2d point of [0,0]. A point at [0,0,4] will get projected to a 2d point of [2,1].

实现在JavaScript中，它看起来是这样的：

Implemented in JavaScript, it would look something like this:

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

一旦你拥有了这些投影功能 - 或者做法从三维空间到二维空间的转换 - 你可以用它们来开始绘制你的形象。在使用JS帆布一个简单的例子。首先，一些方面的东西：

Once you have these projection functions -- or ways to translate from 3D space into 2D space -- you can use them to start draw your image. A simple example of that using js canvas. First, some context stuff:

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

现在，让我们做一个小帮手来绘制一个三维点：

Now, lets make a little helper to draw a 3D point:

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

这是pretty的简单的功能，我们正在注入画布上下文 CTX ，以及我们的 TX 和 TY 的功能，在这种情况下，我们的dimetric功能，我们在前面看到的。

This is pretty simple function, we are injecting the canvas context as ctx, as well as our tx and ty functions, which in this case our the dimetric functions we saw earlier.

和现在的多边形抽屉：

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

使用这两个功能，可以有效地绘制各种图形，你所期待的。例如：

With those two functions, you could effectively draw the kind of graph you are looking for. For example:

// 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);

不过，你现在应该可以开始看到一些你的实际问题出现的复杂性。也就是说，你问的旋转，在这个例子中，我们使用的是一个非常简单的投影（我们dimetric投影），它并不需要很多其他的不是深度及其影响对X，Y位置之间的关系过于简单化。由于预测变得更加复杂，你需要知道更多关于你的关系/取向在三维空间中，以创造一个合理的2D投影。

However, you should now be able to start to see some of the complexity of your actual question emerge. Namely, you asked about rotation, in this example we are using an extremely simple projection (our dimetric projection) which doesn't take much other than an oversimplified relationship between depth and its influences on x,y position. As the projections become more complex, you need to know more about your relationship/orientation in 3D space in order to create a reasonable 2D projection.

以上code工作示例可以这里发现。的例子还包括可以被换出的dimetric那些看如何改变的曲线图的样子等角投影功能。它也做了一些不同的可视化的东西，我并没有包括在这里，像图阴影帮助可视化的实际方向 - 3D到2D投影的限制

A working example of the above code can be found here. The example also includes isometric projection functions that can be swapped out for the dimetric ones to see how that changes the way the graph looks. It also does some different visualization stuff that I didn't include here, like drawing "shadows" to help "visualize" the actual orientation -- the limitations of 3D to 2D projections.

这是复杂的，甚至是肤浅的讨论是一种超越这个计算器的范围。我建议你​​阅读到更多的3D背后的数学，也有丰富的资源，包括在线和印刷形式。一旦你有怎样的数学工程，再回到这里，如果你有一个关于它的具体实施问题的基础更加扎实的理解。

It's complicated, and even a superficial discussion is kind of beyond the scope of this stackoverflow. I recommend you read more into the mathematics behind 3D, there are plenty of resources, both online and in print form. Once you have a more solid understanding of the basics of how the math works then return here if you have a specific implementation question about it.

这篇关于基于如何在x，y和z在3D的矩形画线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！