P5.js | setCamera()函数

setCamera()函数是p5.js中用于设置3D视角的函数。使用该函数可以更改当前场景的视角、缩放、截面等属性，从而实现3D画面的显示。

语法

setCamera([x, y, z], [centerX, centerY, centerZ], [upX, upY, upZ]);

该函数接受三个参数，分别为相机的位置、视线的目标点、和相机朝上的方向。

参数

位置

位置参数定义了相机在场景中的坐标，也就是控制相机的位置和角度。该参数是一个包含三个数字的数组，其中第一个元素为相机在x轴上的坐标，第二个元素为相机在y轴上的坐标，第三个元素为相机在z轴上的坐标。

目标点

目标点参数是相机指向的点的坐标。该参数是一个包含三个数字的数组，其中第一个元素为目标点在x轴上的坐标，第二个元素为目标点在y轴上的坐标，第三个元素为目标点在z轴上的坐标。

头顶方向

头顶方向参数定义了相机的朝上方向，通常情况下坐标系中的y轴为朝上方向。该参数是一个包含三个数字的数组，其中第一个元素为头顶方向在x轴上的方向，第二个元素为头顶方向在y轴上的方向，第三个元素为头顶方向在z轴上的方向。

示例代码

function setup() {
  createCanvas(640, 480, WEBGL);
}

function draw() {
  background(200);

  // 设置相机
  setCamera([120, -120, 180], [0, 0, 0], [0, 0, 1]);

  // 绘制立方体
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);

  // 绘制坐标轴
  strokeWeight(2);
  stroke(255, 0, 0);
  line(0, 0, 0, 50, 0, 0);
  stroke(0, 255, 0);
  line(0, 0, 0, 0, 50, 0);
  stroke(0, 0, 255);
  line(0, 0, 0, 0, 0, 50);
}

在以上示例代码中，我们首先使用setCamera()函数设置相机的位置、目标点和头顶方向。接着我们绘制了一个立方体，并使用rotateX()和rotateY()函数实现立方体的旋转。最后绘制了坐标轴，以方便观察相机的位置和旋转效果。

总结

setCamera()函数是p5.js中非常重要的函数，它可以实现3D场景的显示。掌握这个函数，我们可以更好地完成3D图形的绘制和交互。