如何使用 Processing.JS 制作 3D table？

Question

我想要运行一个 for 循环，其中一行的颜色为棕色。这条线会越来越小，但不会太小。

最终图像将如下所示，但 table 顶部为棕色：

//Back wall
fill(102, 102, 102);
rect(50,50,300,300);
//Top Left Corner
line(50,50,0,0);
//Top Right Corner
line(350,50,400,0);
//Bottom Left Corner
line(350,350,400,400);
//Bottom Riight Corner
line(50,350,0,400);

//Table
//Top Left
fill(48, 17, 0);
rect(163,312,3,38);
//Top Right
fill(48, 17, 0);
rect(230,312,3,38);
//Mesa
fill(48, 17, 0);
rect(126,322,142,5);
//Right Side
line(126,322,168,312);
//Top Side
line(234,312,168,312);
//Right Side
line(269,322,232,312);
//Bottom Left Leg
rect(126,327,5,41);
line(126,368,126,322);
//Bottom Right Leg
rect(263,327,5,41);
line(269,368,268,322);

我试过这个for循环：

for(var x = 200; x > 100; x--){

 stroke(61, 34, 0);
 line(x,200,x,200);

}

x 值会减小直到 x = 100。但是，即使在确保 background() 之后，它也不会显示线条变小；不在循环中。

P.S。给出的代码片段是分开的。

Answer 1

您只是更改了正在绘制的线条的 x 坐标，因此线条是水平移动的，而不是垂直移动的。

如果您希望线条垂直移动（在 table 中着色）和水平移动（使其在 "further away" 时变小），您必须同时更改 x 和 y 传递给 line() 函数的值。

但是你让这件事变得比它需要的更难了。你没有理由画一堆线来得到这个形状。直接使用beginShape()函数绘制多边形即可。像这样：

  beginShape();
  vertex(100, 100); //upper-left
  vertex(200, 100); //upper-right
  vertex(250, 200); //lower-right
  vertex(50, 200); //lower=left
  endShape(CLOSE);

请注意，这只是一个示例，您必须尝试使用这些值才能将其绘制在正确的位置。但关键是你不必为了画多边形而使用 for 循环画线。

由于您正在尝试绘制 3D 场景，因此您还应该注意，您可以简单地使用 3D 坐标和 vertex() 函数来进行 3D 绘制。无需自己尝试强制透视。

如何使用 Processing.JS 制作 3D table？

How do I make a 3D table using Processing.JS?

processing

processing.js