p5.js perspective() 方法介绍

perspective() 是 p5.js 中的一个绘图方法，可以通过调整视角实现三维平面的透视效果。本文将对此方法的使用进行详细介绍。

方法说明

perspective() 方法用于设置透视的参数，该方法接受一个参数，即透视角度（单位为弧度）。默认情况下，透视角度为 PI/3.0。

perspective() 方法一般会与 camera() 方法一起使用，将视图投影到平面上。

语法格式

perspective(angle, aspect, near, far);

参数说明

• angle：透视角度，单位为弧度，默认为 PI/3.0。
• aspect：投影比率，即宽高比。
• near：近平面距离。
• far：远平面距离。

注意：如果只给定一个参数，则该参数是透视角度。如果给定两个参数，则它们是 angle 和 aspect。如果给定四个参数，则它们分别是 angle、aspect、near 和 far。

代码示例

下面是一个简单的使用 perspective() 方法的例子。通过调整透视角度和相机位置，可以实现不同的透视效果。

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

function draw() {
  background(200);
  noStroke();
  fill(255, 0, 0);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);

  // 设置透视效果
  perspective(PI / 3.0, width / height, 0.1, 300);

  // 设置相机位置
  camera(0, 0, 200, 0, 0, 0, 0, 1, 0);
}

在这个例子中，我们首先使用 createCanvas() 方法创建一个 400x400 的画布，并将渲染模式设置为 WEBGL。在 draw() 函数中，我们首先绘制一个立方体，然后通过 rotateX() 和 rotateY() 方法对其进行旋转。

接着，我们使用 perspective() 方法设置透视效果。其中，透视角度为 PI/3.0，投影比率为 width / height，近平面距离为 0.1，远平面距离为 300。最后，我们通过 camera() 方法设置相机位置，让其位于 (0,0,200) 的位置，并朝向 (0,0,0)。

运行这段代码后，可以看到立方体被渲染成了一个有透视效果的三维图形。通过调整透视角度和相机位置，可以实现更加复杂的三维场景。