如何使用Processing.JS製作3D表格？

Question

我想運行一個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(var x = 200; x > 100; x--){ 

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

} 

x值將降低直到x = 100。但是，在確定background（）後，它並沒有顯示出這條線變小了。不在環路中。

P.S.給出的代碼是分開的。

Answer 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。無需嘗試自己強制觀察。