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

p5.js中p5.Camera的tilt()方法用於根據給定的旋轉量旋轉攝像機的視圖，即平移。通過使用正負旋轉值旋轉攝像機，可以上下左右移動攝像機。

用法:

tilt( angle )

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

angle:該數字表示相機必須旋轉的數量。可以使用angleMode()方法指定要使用的旋轉單位。小於0的值會平移相機。同樣，大於0的值將使攝像機向下移動。

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

例：

Javascript

let currCamera; 
  
function setup() { 
  createCanvas(500, 400, WEBGL); 
  helpText = createP( 
    "Click the buttons to tilt " + 
    "the camera to up or down"); 
  helpText.position(80, 0); 
  
  currCamera = createCamera(); 
    
  // Set the angle mode to be used 
  angleMode(DEGREES); 
  
  // Create three buttons for tilting the camera 
  newCameraBtn = createButton("Tilt Up"); 
  newCameraBtn.position(60, 40); 
  newCameraBtn.mouseClicked(tiltCameraUp); 
  
  newCameraBtn = createButton("Tilt Down"); 
  newCameraBtn.position(360, 40); 
  newCameraBtn.mouseClicked(tiltCameraDown); 
} 
  
function tiltCameraUp() { 
  
  // Tilt the camera up using 
  // a value less than 0 
  currCamera.tilt(-10); 
} 
  
function tiltCameraDown() { 
  
  // Tilt the camera up using 
  // a value greater than 0 
  currCamera.tilt(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); 
  translate(-150, 0); 
  
  // Draw 2 spheres only visible after 
  // tilting up and down 
  translate(0, 300, 0); 
  sphere(50); 
  translate(0, -600, 0); 
  sphere(50); 
}

輸出：

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

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

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

相關用法

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