Javascript 在3D中绘制正方形

考虑到正方形的位置（在本例中为墙）、“摄影机”的位置和旋转以及其他因素，我知道如何计算在渲染到2D画布时正方形的四个点的位置

然而，我不知道的是如何实际渲染正方形。如果我有一个图像，我如何绘制它，使其四个角位于我计算的四个点上

---

---

更多信息：我实际上要做的是渲染迷宫中的视图。我以前使用光线投射完成过这项工作，类似于末日和沃尔芬斯坦3D。然而，这只适用于较小的视图（我选择的是320x240）。我想全屏呈现这个。如果您对渲染这样的场景（方形墙、基于精灵的对象等）有任何建议，我们将不胜感激。

不完全确定，但我想您需要的是以下几点：

//Credit to Andrea "6502" Griffini.
//Pass context, image and points of triangle to draw
function textureMap(ctx, texture, pts) {
  var x0 = pts[0].x, x1 = pts[1].x, x2 = pts[2].x;
  var y0 = pts[0].y, y1 = pts[1].y, y2 = pts[2].y;
  var u0 = pts[0].u, u1 = pts[1].u, u2 = pts[2].u;
  var v0 = pts[0].v, v1 = pts[1].v, v2 = pts[2].v;

  ctx.save(); ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.closePath(); ctx.clip();

  var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
  var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
  var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
  var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
  var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
  var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
  var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;

  ctx.transform(delta_a/delta, delta_d/delta, delta_b/delta, delta_e/delta, delta_c/delta, delta_f/delta);
  //Edit to allow for repeated image
  var x_max = Math.max(u0,u1,u2); var x_min = Math.min(u0,u1,u2);
  var y_max = Math.max(v0,v1,v2); var y_min = Math.min(v0,v1,v2);
  var x_iter = x_max-x_min; var y_iter = y_max-y_min;

  for (var x=0; x<x_iter; x+=texture.width) {
    for (var y=0; y<y_iter; y+=texture.height) {
      ctx.drawImage(texture, x, y);
    }
  }
  ctx.restore();
};

//归功于安德里亚“6502”格里菲尼。
//传递要绘制的三角形的上下文、图像和点
功能纹理贴图（ctx、纹理、pts）{
变量x0=pts[0].x，x1=pts[1].x，x2=pts[2].x；
变量y0=pts[0]。y，y1=pts[1]。y，y2=pts[2]。y；
变量u0=pts[0]。u，u1=pts[1]。u，u2=pts[2]。u；
变量v0=pts[0]。v，v1=pts[1]。v，v2=pts[2]。v；
ctx.save（）；ctx.beginPath（）；
ctx.moveTo（x0，y0）；
ctx.lineTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.closePath（）；ctx.clip（）；
var delta=u0*v1+v0*u2+u1*v2-v1*u2-v0*u1-u0*v2；
var delta_a=x0*v1+v0*x2+x1*v2-v1*x2-v0*x1-x0*v2；
var delta_b=u0*x1+x0*u2+u1*x2-x1*u2-x0*u1-u0*x2；
var delta_c=u0*v1*x2+v0*x1*u2+x0*u1*v2-x0*v1*u2-v0*u1*x2-u0*x1*v2；
var delta_d=y0*v1+v0*y2+y1*v2-v1*y2-v0*y1-y0*v2；
var delta_e=u0*y1+y0*u2+u1*y2-y1*u2-y0*u1-u0*y2；
var delta_f=u0*v1*y2+v0*y1*u2+y0*u1*v2-y0*v1*u2-v0*u1*y2-u0*y1*v2；
变换（三角洲a/三角洲、三角洲d/三角洲、三角洲b/三角洲、三角洲e/三角洲、三角洲c/三角洲、三角洲f/三角洲）；
//编辑以允许重复图像
var x_max=Math.max（u0，u1，u2）；var x_min=Math.min（u0，u1，u2）；
变量y_max=Math.max（v0，v1，v2）；变量y_min=Math.min（v0，v1，v2）；
变量x_iter=x_max-x_min；变量y_iter=y_max-y_min；
对于（var x=0；x的可能重复项），您正在尝试渲染实心正方形还是渲染矩形图像？@MarkHildreth我正在尝试渲染图像。