p5.js: How to rotate 3D objects on the X, Y, and Z axis

On the 2D plain of a browser window p5.js can represent 3D space using WEBGL. This is specified as the third argument to the createCanvas() function in the setup portion of the sketch:

createCanvas(400, 300, WEBGL);

Here is some code that demonstrates how to rotate a 2D rectangle on the X axis, using rotateX(), which takes in an angle of radians as an argument.

let angle = 0;

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

function draw() {
  background(175);
  rectMode(CENTER);
  fill(0,0,255);
  rotateX(angle);
  rect(0, 0, 150, 150);
  angle += 0.025;
}

We can also use rotateY() to rotate it on the Y axis:

Or rotateZ() to rotate on the Z axis:

Or on all three axis at the same time:

Here is some code for rotating a 3D cube on all three axis. In p5.js, a cube is created with box().

let angle = 0;

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

function draw() {
  background(175);
  rotateX(angle);
  rotateY(angle);
  rotateZ(angle * 0.75);

  // box(w, h, d) 
  // if only one arg, then use the value for all three dimensions
  box(175);
  angle += 0.025;
}

For more information see:
https://p5js.org/reference/#/p5/box
https://p5js.org/reference/#/p5/rotateX
https://p5js.org/examples/3d-geometries.html