p5.js | createCamera()函数

p5.js 中的createCamera()函数用于创建 p5.Camera 对象并告诉渲染器将其用作当前相机。它返回它新创建的相机对象。

句法：

createCamera()

参数：此函数不接受任何参数。
返回值：它返回一个 p5.Camera 对象，表示新创建的相机。

下面的示例说明了 p5.js 中的createCamera()函数：
例子：

javascript

let currCamera;
  
function setup() {
  createCanvas(500, 300, WEBGL);
  helpText = createP("Click on the buttons to create"+
                     "a camera and position it");
  helpText.position(20, 0);
  
  // Create three buttons for setting
  // a new camera for three directions
  newCameraBtn = createButton("Left Camera");
  newCameraBtn.position(20, 40);
  newCameraBtn.mouseClicked(createLeftCamera);
  
  newCameraBtn = createButton("Middle Camera");
  newCameraBtn.position(170, 40);
  newCameraBtn.mouseClicked(createMiddleCamera);
  
  newCameraBtn = createButton("Right Camera");
  newCameraBtn.position(320, 40);
  newCameraBtn.mouseClicked(createRightCamera);
}
  
function createLeftCamera() {
  // Create a new camera using createCamera()
  // and set its position
  currCamera = createCamera();
  currCamera.setPosition(-75, 0, 250);
}
  
function createMiddleCamera() {
  // Create a new camera using createCamera()
  // and set its position
  currCamera = createCamera();
  currCamera.setPosition(0, 0, 250);
}
  
function createRightCamera() {
  // Create a new camera using createCamera()
  // and set its position
  currCamera = createCamera();
  currCamera.setPosition(75, 0, 250);
}
  
function draw() {
  clear();
  orbitControl();
  normalMaterial();
  
  // Create three boxes at three positions
  translate(-150, 0);
  box(65);
  translate(150, 0);
  box(65);
  translate(150, 0);
  box(65);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5/createCamera