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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。