使用 p5.js 实现旋转Y事件

在 p5.js 中，可以通过 rotateY() 方法实现绕 Y 轴的旋转。当需要在用户交互时触发旋转操作时，可以使用 mouseDragged() 事件来响应用户的操作，实现可交互的旋转效果。

实现方式

首先，在 setup() 函数中设置画布大小，并将绘制模式设置为 3D：

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

接着，在 draw() 函数中，调用 rotateY() 方法实现旋转，并使用 box() 方法绘制一个立方体：

function draw() {
  background(200);

  // 绕 Y 轴旋转
  rotateY(frameCount * 0.01);

  // 绘制一个立方体
  box(100);
}

通过调用 rotateY() 方法并传入一个旋转角度，就可以实现绕 Y 轴的旋转效果。在本例中，使用 frameCount 以每秒 60 帧的速率更新旋转角度。如果需要更快的旋转速度，可以调整旋转角度的增量。

最后，在 mouseDragged() 事件中调用 rotateY() 方法来响应鼠标拖拽事件，并更新旋转角度：

function mouseDragged() {
  let x = mouseX - width / 2;
  let y = mouseY - height / 2;
  let angle = atan2(y, x);

  // 根据鼠标拖拽计算旋转角度
  rotateY(angle);
}

在 mouseDragged() 事件中，根据鼠标拖拽位置的相对坐标计算旋转角度，并使用 rotateY() 方法更新旋转角度。

完整代码

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

function draw() {
  background(200);

  rotateY(frameCount * 0.01);

  box(100);
}

function mouseDragged() {
  let x = mouseX - width / 2;
  let y = mouseY - height / 2;
  let angle = atan2(y, x);

  rotateY(angle);
}

结语

通过使用 p5.js 和 rotateY() 方法，我们可以轻松实现可交互的绕 Y 轴旋转效果。通过响应鼠标拖拽事件，可以实现更加丰富的用户交互。