在p5.js中制作一个盒子

p5.js是一个基于JavaScript的开源库，可以用于创造交互式的画布应用程序。在这篇文章中，我们将学习如何使用p5.js绘制一个3D盒子。

步骤1：创建画布

首先，我们需要在HTML中创建一个canvas标签，它将成为我们绘制盒子的容器。在JavaScript中，我们使用createCanvas()函数指定宽度和高度创建画布。

function setup() {
  createCanvas(400, 400, WEBGL);
}

我们传递给createCanvas()函数的三个参数分别是宽度、高度和mode（WEBGL用于3D绘图）。

步骤2：绘制盒子

我们可以使用box()函数绘制一个盒子。此函数接受一个参数，即盒子的尺寸。我们可以将其作为单个参数传递，表示盒子的边长。此外，参数还可以是三个数字，分别表示盒子在x、y和z方向上的大小。

function draw() {
  background(200); //设置背景颜色
  rotateX(frameCount * 0.01); //使用帧计数器进行旋转
  rotateY(frameCount * 0.01);
  box(100); //绘制一个边长为100的正方体盒子
}

在上述代码中，我们使用了background()函数设置了背景颜色，使用了rotateX()和rotateY()函数进行旋转，使用了box()函数绘制盒子。

完整代码

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);
}

在以上代码中，我们将创建画布和绘制盒子的函数分别写在了setup()和draw()函数中，这是p5.js的常规用法。

现在你应该能够在p5.js中绘制一个简单的盒子了！