如何使用 Processing.JS 制作 3D 表格？答案

【问题标题】：How do I make a 3D table using Processing.JS?如何使用 Processing.JS 制作 3D 表格？
【发布时间】：2016-04-07 16:14:05
【问题描述】：

我想运行一个 for 循环，该循环将有一条棕色的线。这条线会越来越小，但不会太小。

最终图像将如下所示，但桌面为棕色：

//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(); 之后，它也没有显示线条变小。不在循环中。

附：给出的代码是分开的。

【问题讨论】：

标签： processing processing.js

【解决方案1】：

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

如果您希望线条垂直移动（在表格中着色）和水平移动（使其在“更远”时变小），则必须同时更改 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。无需尝试自己强制透视。

【讨论】：