p5.js Camera lookAt()用法及代碼示例

p5.js中p5.Camera的lookAt()方法用於重新定向相機以使其看向世界空間中的給定位置。重新定位期間，相機的位置不會改變。

用法:

lookAt( x, y, z )

參數：此方法接受上述和以下所述的三個參數：

x:它是一個數字，表示該點在世界空間中的x位置。
y:它是一個數字，表示該點在世界空間中的y位置。
z:該數字表示點在世界空間中的z位置。

以下示例說明了p5.js中的lookAt()方法：

範例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); 
}

輸出：

範例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); 
}

輸出：

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.Camera lookAt() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。