p5.js perspective() 方法

p5.js 中的perspective()函数用于在 3D 草图中定义相机的透视投影。

靠近相机的物体会显示其真实尺寸，而远离相机的物体会显得比真实尺寸小。这被称为透视缩短。这个函数的参数定义了一个截棱锥形状的观察体。可以使用给定的参数设置视野、纵横比、近剪裁平面和远剪裁平面。

句法：

perspective([fovy], [aspect], [near], [far])

参数：此函数接受上面提到的四个参数，如下所述：

• fovy：这是一个数字，用于定义从底部到顶部看到的相机平截头体垂直视野。这是一个可选参数。
• aspect：这是一个定义相机平截头体纵横比的数字。这是一个可选参数。
• near：这是一个定义平截头体近平面长度的数字。这是一个可选参数。
• far：这是一个定义平截头体远平面长度的数字。这是一个可选参数。

下面的例子说明了 p5.js 中的perspective()函数：

例子：

Javascript

function setup() {
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
  background(175);
    
  // Map the fov to the mouse x-axis
  let fov = map(mouseX, 0, width, 0, PI);
  let cZ = (height/2.0) / tan((PI/3)/2.0);
    
  // Set the perspective to the fov
  perspective(fov, float(width)/float(height),
              cZ/10.0, cZ*10.0);
    
  ambientLight(255);
    
  rotateZ(frameCount * 0.02);
  rotateX(frameCount * 0.02);
  
  noStroke();
  normalMaterial();
  box(100, 100, 100);
    
}

输出：

参考： https://p5js.org/reference/#/p5/perspective