p5.js | box()函数

p5.js 中的box()函数用于绘制具有给定高度、宽度和深度的框。

句法：

box( width, height, depth, detailX, detailY )

参数：该函数接受上面提到的五个参数，如下所述：

width：此参数存储框的宽度。

height：此参数存储盒子的高度。

depth：此参数存储框的深度。

detailX：此参数存储 x 维度中三角形细分的可选数量。

detailY：此参数存储 y 维度中三角形细分的可选数量。

下面的程序说明了 p5.js 中的box()函数：

示例 1：此示例使用 box()函数绘制一个框。

function setup() {
      
    // Create Canvas of size 600*600
    createCanvas(600, 600, WEBGL);
}
   
function draw() {
      
    // Set background color
    background(200);
     
    // Set fill color of box
    fill('green');
     
    // box() function
    box(300, 400, 200);
}

输出：

示例 2：本示例使用 box()函数绘制一个框。

function setup() {
    
    // Create Canvas of size 600*600
    createCanvas(600, 600, WEBGL);
}
   
function draw() {
      
    // Set background color
    background(200);
     
    // Set fill color of box
    fill('yellow');
     
    // Rotate 
    rotateX(frameCount * 0.01);
    rotate(frameCount*0.03);
     
    // box() function called
    box(140, 130, 120);
}

输出：

参考： https://p5js.org/reference/#/p5/box