📜  p5.Camera move() 方法

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

p5.Camera move() 方法

p5.js 中 p5.Camera 的move() 方法用于将相机沿其局部轴移动指定的量。它在移动时保持当前相机方向。

句法:

move( x, y, z )

参数:此方法接受三个参数,如上所述,如下所述:

  • x:这是一个数字,表示相机沿其左右轴移动的量。
  • y:这是一个数字,表示相机沿其上下轴移动的量。
  • z:这是一个数字,表示相机沿其前后轴移动的量。

下面的示例说明了 p5.js 中的move() 方法

示例 1:

Javascript
let currCamera;
  
function setup() {
  createCanvas(500, 500, WEBGL);
  helpText = createP(
    "Click the buttons to move the " +
    "camera in that direction");
  helpText.position(20, 0);
  
  currCamera = createCamera();
  
  // Create three buttons for moving the
  // position camera
  newCameraBtn = createButton("Move Left");
  newCameraBtn.position(20, 40);
  newCameraBtn.mouseClicked(moveCameraLeft);
    
  newCameraBtn = createButton("Move Right");
  newCameraBtn.position(120, 40);
  newCameraBtn.mouseClicked(moveCameraRight);
  
  newCameraBtn = createButton("Move Up");
  newCameraBtn.position(20, 70);
  newCameraBtn.mouseClicked(moveCameraUp);
  
  newCameraBtn = createButton("Move Down");
  newCameraBtn.position(120, 70);
  newCameraBtn.mouseClicked(moveCameraDown);
}
  
function moveCameraLeft() {
  
  // Look at the given position
  // in the world space
  currCamera.move(-15, 0, 0);
}
  
function moveCameraRight() {
  
  // Look at the given position
  // in the world space
  currCamera.move(15, 0, 0);
}
  
function moveCameraUp() {
  
  // Look at the given position
  // in the world space
  currCamera.move(0, -15, 0);
}
  
function moveCameraDown() {
  
  // Look at the given position
  // in the world space
  currCamera.move(0, 15, 0);
}
  
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);
}


Javascript
let currCamera;
  
function setup() {
  createCanvas(500, 500, WEBGL);
  helpText = createP(
    "Move the sliders to keep moving " +
    "the camera in a direction"
  );
  helpText.position(20, 0);
  
  // Create the camera
  currCamera = createCamera();
  
  // Create three sliders for moving the
  // position of the camera
  xPosSlider = createSlider(-2, 2, 0);
  xPosSlider.position(20, 40);
  
  yPosSlider = createSlider(-2, 2, 0);
  yPosSlider.position(20, 70);
  
  zPosSlider = createSlider(-2, 2, 0);
  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();
  
  // Keep moving the camera according to
  // to the given amount
  currCamera.move(currX, currY, currZ);
  
  box(90);
}


输出:

示例 2:

Javascript

let currCamera;
  
function setup() {
  createCanvas(500, 500, WEBGL);
  helpText = createP(
    "Move the sliders to keep moving " +
    "the camera in a direction"
  );
  helpText.position(20, 0);
  
  // Create the camera
  currCamera = createCamera();
  
  // Create three sliders for moving the
  // position of the camera
  xPosSlider = createSlider(-2, 2, 0);
  xPosSlider.position(20, 40);
  
  yPosSlider = createSlider(-2, 2, 0);
  yPosSlider.position(20, 70);
  
  zPosSlider = createSlider(-2, 2, 0);
  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();
  
  // Keep moving the camera according to
  // to the given amount
  currCamera.move(currX, currY, currZ);
  
  box(90);
}

输出:

在线编辑器: https://editor.p5js.org/

环境设置: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考: https://p5js.org/reference/#/p5.Camera/move