在p5.js-webgl3d中绘制一个四边形

draw a quad in p5.js webgl 3d

本文关键字：一个 四边形 p5 js-webgl3d 绘制      更新时间：2023-09-26

我想在支持webgl的p5.js中绘制一个quad。我的代码显示在下面

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

中，有其他方法可以在三维空间中绘制四边形吗

您编写的代码将始终生成一个三角形，而不是quad/rect，因为您从一个点开始，到同一点结束，只覆盖中间的另外两个点，即您只有3个点（三角形）。

对于四边形（正方形），您可以将其制作为：

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个点。（A quad）

只需使用：

quad(x1, y1, x2, y2, x3, y3,x4, y4).
相关文章：