p5.js | createCamera()函数

简介

createCamera()函数是p5.js中的一个内置函数，它允许开发者创建一个可交互的摄像机，以改变绘图环境的视角和角度。通过该函数创建的相机可以接收并响应鼠标和键盘的交互事件，以改变视角位置和方向。

语法

createCamera([cameraX], [cameraY], [cameraZ], [targetX], [targetY], [targetZ], [upX], [upY], [upZ])

参数：

• cameraX：相机的x坐标，默认为0
• cameraY：相机的y坐标，默认为0
• cameraZ：相机的z坐标，默认为0
• targetX：相机目标点的x坐标，默认为0
• targetY：相机目标点的y坐标，默认为0
• targetZ：相机目标点的z坐标，默认为0
• upX：相机的上方向量的x坐标，默认为0
• upY：相机的上方向量的y坐标，默认为1
• upZ：相机的上方向量的z坐标，默认为0

实例

通过下面的代码，我们可以创建一个灰色的平面并在其上方创建一个红色的立方体，同时创建一个相机并设置其初始位置和方向。运行代码并拖动鼠标或按下键盘，可以看到平面和立方体的相对位置和大小会发生变化，因为相机的方向和位置发生了改变。

let planeSize = 400;
let boxSize = 50;

function setup() {
  createCanvas(500, 500, WEBGL);
  noStroke();
  
  // 创建相机
  cam = createCamera();
  cam.setPosition(0, -160, 160);
  cam.lookAt(0, 0, 0);

  // 创建灰色平面
  push();
  ambientMaterial(color(200));
  plane(planeSize);
  pop();

  // 创建红色立方体
  push();
  ambientMaterial(color(255, 0, 0));
  translate(0, 0, boxSize/2);
  box(boxSize);
  pop();
}

function draw() {
  background(255);
}

参考

更多关于createCamera()函数的详细介绍和用法请参考官方文档：https://p5js.org/reference/#/p5/createCamera