p5.Método paneo de cámara()

El método pan() de p5.Camera en p5.js se usa para rotar la vista, es decir, mover la cámara según la cantidad de rotación dada. La cámara se puede desplazar tanto hacia la izquierda como hacia la derecha girándola en el sentido contrario o en el sentido de las agujas del reloj.

Sintaxis:

pan( angle )

Parámetros: este método acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:

ángulo: Es un número que denota la cantidad que la cámara tiene que girar. Las unidades de rotación que se utilizarán se pueden especificar mediante el método angleMode(). Un valor superior a 0 giraría la cámara en sentido contrario a las agujas del reloj, es decir, desplazaría la cámara hacia la izquierda. De manera similar, para valores negativos, la cámara giraría en el sentido de las agujas del reloj.

El siguiente ejemplo ilustra el método pan() en p5.js:

Ejemplo:

Javascript

let currCamera;
  
function setup() {
  createCanvas(500, 400, WEBGL);
  helpText = createP(
    "Click the buttons to pan the camera " +
    "to the left or right");
  helpText.position(80, 0);
  
  currCamera = createCamera();
  
  // Set the angle mode in degrees
  angleMode(DEGREES);
  
  // Create the buttons for panning the camera
  newCameraBtn = createButton("Pan Left");
  newCameraBtn.position(60, 40);
  newCameraBtn.mouseClicked(panCameraLeft);
  
  newCameraBtn = createButton("Pan Right");
  newCameraBtn.position(360, 40);
  newCameraBtn.mouseClicked(panCameraRight);
}
  
function panCameraLeft() {
  
  // Pan the camera to the left
  // that is, rotate counterclockwise
  // using a value greater than 0
  currCamera.pan(10);
}
  
function panCameraRight() {
  
  // Pan the camera to the right
  // that is, rotate clockwise
  // using a value less than 0
  currCamera.pan(-10);
}
  
function draw() {
  clear();
  lights();
  specularMaterial('blue');
  
  // Create three boxes at three positions
  translate(-150, 0);
  box(65);
  translate(150, 0);
  box(65);
  translate(150, 0);
  box(65);
  
  // Draw 2 spheres only visible after
  // panning left and right
  translate(0, 0, 250);
  sphere(30);
  translate(-300, 0, 0);
  sphere(30);
}

Producción: