p5.js camera() 方法

p5.js 中的camera()函数用于设置虚拟相机在 3D 草图上的位置。这可用于模拟相机的位置，因为它会在场景中移动，从而可以从各个角度查看对象。

该函数的参数包括设置相机的位置、相机的中心和指向上方的矢量。

句法：

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

参数：此函数接受上述九个参数，如下所述：

• x：这是一个数字，表示 x 轴上的相机位置。
• y：这是一个数字，表示 y 轴上的相机位置。
• z：这是一个数字，表示 z 轴上的相机位置。
• centerX：这是一个数字，表示草图中心的 x 坐标。
• centerY：这是一个数字，表示草图中心的 y 坐标。
• centerZ：这是一个数字，表示草图中心的 z 坐标。
• upX：这是一个数字，表示从相机“向上”方向的 x 分量。
• upY：这是一个数字，表示从相机“向上”方向的 y 分量。
• upZ：这是一个数字，表示相机“向上”方向的 z 分量。

以下示例说明了 p5.js 中的camera()函数：

示例 1：设置相机在 x 轴上的视图。

Javascript

function setup() {
    
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
    
  background(175);
    
  // Map the coordinates of the mouse
  // to the variable
  let cX = map(mouseX, 0,
               width, -200, 200);
    
  // Set the camera to the given coordinates
  camera(cX, 0, (height/2) / tan(PI/6),
         cX, 0, 0, 0, 1, 0);
    
  ambientLight(255);
    
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.03);
  rotateY(frameCount * 0.06);
  noStroke();
  normalMaterial();
    
  box(100, 100, 100);
}

输出：

示例 2：将摄像机的视图设置为每帧随机方向。

Javascript

function setup() {
    
  frameRate(5);
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
    
  background(175);
    
  let cX = random(-10,10);
  let cY = random(-10,10);
  let cZ = random(-10,10);
    
  camera(cX, cY,
         cZ+(height/2) / tan(PI/6),
         cX, 0, 0, 0, 1, 0);
    
  ambientLight(255);
    
  rotateX(frameCount * 0.1);
  rotateY(frameCount * 0.1);
    
  noStroke();
  normalMaterial();
    
  box(100, 100, 100);
}

输出：

参考： https://p5js.org/reference/#/p5.Camera