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

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