p5.js中的camera()方法介绍

在p5.js中，camera()方法可以用来设置3D场景中相机的位置和方向。相机可以让我们从不同的角度观察场景。本文将介绍camera()方法的使用。

语法

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

在camera()方法中，我们可以传入9个参数，可以是位置、中心坐标和向上的向量。这些参数都是可选的。如果省略位置参数，则会默认将相机放在原点。

示例

以下示例将演示如何使用camera()方法:

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

function draw() {
  background(200);

  // 改变相机位置和方向
  camera(0, -100, (height/2)/tan(PI/6), 0, 0, 0, 0, 1, 0);

  // 绘制一个球
  push();
  fill(255, 0, 0);
  noStroke();
  sphere(50);
  pop();
}

在此示例中，我们在画布中心绘制一个红色的球体。我们使用camera()方法来设置相机的位置和方向，这样我们可以从不同的角度观察球体。在这种情况下，相机位于z轴上并向下。球体的中心点处于原点。

说明

在p5.js中，画布左上角是原点，x轴指向右侧，y轴指向下侧，z轴指向内部。因此，正值z意味着物体远离我们，负值z意味着物体靠近我们。通过调整相机的位置和方向，我们可以从不同的角度观察场景。

结论

camera()方法是p5.js中一个非常有用的方法，可以让我们控制3D场景中相机的位置和方向。通过调整相机的位置和方向，我们可以从不同的角度观察场景。