p5.Método LookAt() de la cámara

El método lookAt() de p5.Camera en p5.js se usa para reorientar la cámara para mirar la posición dada en el espacio mundial. La posición de la cámara no cambia durante la reorientación.

Sintaxis:

lookAt( x, y, z )

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

x: Es un número que denota la posición x del punto en el espacio mundial.
y: Es un número que denota la posición y del punto en el espacio mundial.
z: Es un número que denota la posición z del punto en el espacio mundial.

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

Ejemplo 1:

Javascript

let currCamera;
  
function setup() {
  createCanvas(500, 500, WEBGL);
  helpText = createP(
    "Move the sliders to change the " +
    "position where the camera is looking"
  );
  helpText2 = createP(
    "The sphere shows the point where " +
    "the camera is currently looking"
  );
  helpText.position(20, 0);
  helpText2.position(20, 110);
  
  // Create the camera
  currCamera = createCamera();
  
  // Create three sliders for changing the
  // direction that the camera will look at
  xPosSlider = createSlider(-360, 360, 0);
  xPosSlider.position(20, 60);
  
  yPosSlider = createSlider(-360, 360, 0);
  yPosSlider.position(20, 80);
  
  zPosSlider = createSlider(-360, 360, 100);
  zPosSlider.position(20, 100);
}
  
function draw() {
  clear();
  lights();
  normalMaterial();
  debugMode();
  
  // Get the x, y, z values from the
  // sliders
  let currX = xPosSlider.value();
  let currY = yPosSlider.value();
  let currZ = zPosSlider.value();
  
  // Look at the given points in 
  // the world space
  currCamera.lookAt(currX, currY, currZ);
  
  // Show the point where the camera is
  // currently looking at (for demonstration)
  translate(currX, currY, currZ);
  sphere(5);
  translate(-currX, -currY, -currZ);
  
  rotateX(50);
  rotateY(50);
  box(90);
}

Producción:

Ejemplo 2:

Javascript

let currCamera;
let currX = 0;
let currY = 0;
let currZ = 0;
  
function setup() {
  createCanvas(500, 400, WEBGL);
  helpText = createP(
    "Click the buttons to change direction " +
    "that the camera is looking at");
  helpText.position(20, 0);
  
  currCamera = createCamera();
  
  // Create three buttons for changing the
  // direction of the camera
  newCameraBtn = createButton("Look Left");
  newCameraBtn.position(20, 40);
  newCameraBtn.mouseClicked(lookLeftCamera);
  
  newCameraBtn = createButton("Look Up");
  newCameraBtn.position(170, 40);
  newCameraBtn.mouseClicked(lookUpCamera);
  
  newCameraBtn = createButton("Look Right");
  newCameraBtn.position(320, 40);
  newCameraBtn.mouseClicked(lookRightCamera);
}
  
function lookLeftCamera() {
  currX = currX - 25;
  
  // Look at the given position
  // in the world space
  currCamera.lookAt(currX, currY, currZ);
}
  
function lookUpCamera() {
  currY = currY - 25;
  
  // Look at the given position
  // in the world space
  currCamera.lookAt(currX, currY, currZ);
}
  
function lookRightCamera() {
  currX = currX + 25;
  
  // Look at the given position
  // in the world space
  currCamera.lookAt(currX, currY, currZ);
}
  
function draw() {
  clear();
  normalMaterial();
  
  // Create three boxes at three positions
  translate(-150, 0);
  box(65);
  translate(150, 0);
  box(65);
  translate(150, 0);
  box(65);
}

Producción: