p5.js 旋转X 事件

在使用p5.js创建三维场景时，我们可以使用旋转事件来改变对象的角度和方向。其中，旋转X事件可以用来绕X轴旋转对象。

语法

rotateX(angle)

参数：

• angle: 以弧度为单位的旋转角度。

示例

在下面的示例中，我们创建了两个不同颜色的长方体，并使用rotateX函数来分别绕X轴旋转它们。

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

function draw() {
  background(220);

  noStroke();
  
  //第一个长方体，蓝色，绕X轴旋转45度
  push();
  fill(0, 191, 255);
  rotateX(45);
  box(100);
  pop();

  //第二个长方体，红色，绕X轴旋转90度
  push();
  fill(255, 0, 0);
  rotateX(90);
  box(100);
  pop();
}

下面是运行结果：

总结

使用p5.js的rotateX函数可以使对象绕X轴旋转一定的角度。在创建三维场景时，我们可以用它来制作更加生动的动画效果。