Question

我想在p5.js中使用webgl支持绘制四边形。我的代码如下所示

function setup() {
    myCanvas = createCanvas(window.innerWidth,500,WEBGL);
    myCanvas.parent('canvas');
}

function draw(){
    background(255);
    fill('blue');

    beginShape();

    vertex(-100,-100,20);
    vertex(100,-100,20);
    vertex(100,100,20);
    vertex(-100,100,20);


    endShape();

}

但我只是一个三角形。是否还有其他方法可以在p5.js中的3d空间中绘制四边形

Answer 1

你编写的代码总是会产生一个三角形而不是四边形/矩形，因为你是从一个点开始并在同一点结束时只覆盖其中的两个其他点，即你只有3个点（三角形）

对于四边形（Square），您可以将其设为：

scale(70);
beginShape();
fill(1, 0, 0);
vertex(0, 0, 0);
vertex(0, 1, 0);
vertex(1, 1, 0);
vertex(1, 0, 0);
vertex(0, 0, 0);
endShape(CLOSE);

上面的代码具有相同的起点和终点，覆盖3个不同的点，使其总共4个点。（四分之一）

Answer 2

只需使用：

quad(x1, y1, x2, y2, x3, y3,x4, y4).

在p5.js webgl 3d中绘制一个四边形

2 个答案: