📜  p5.Cameratilt() 方法

📅  最后修改于: 2022-05-13 01:56:31.086000             🧑  作者: Mango

p5.Cameratilt() 方法

p5.js 中p5.Camera 的tilt() 方法用于根据给定的旋转量旋转相机的视图,也就是平移。通过使用正负旋转值旋转相机,可以向上或向下平移相机。

句法:

tilt( 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