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