p5.js 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

相关用法

注：本文由纯净天空筛选整理自_sh_pallavi大神的英文原创作品 p5.js perspective() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。