p5.js js frustum()用法及代码示例

p5.js中的frustum()函数用于设置摄像机的视锥，从而改变其视角。

截锥体是可以通过切割金字塔的顶部获得的几何形状。渲染3D视图时，其余金字塔的六个平面充当剪切平面。因此，剪切平面内部的任何内容都是可见的，而剪切平面外部的任何内容都不可见。

用法:

frustum([left], [right], [bottom], [top], [near], [far])

参数：该函数接受上述和以下所述的六个参数：

left:这是用于设定相机视锥的左平面的数字。
right:这是一个用于设置摄像机视锥的右平面的数字。
bottom:这是设置相机视锥台底面的数字。
top:这是设置摄像机视锥的顶面的数字。
near:这是一个用于设置相机视锥台接近平面的数字。
far:这是一个设置摄像机视锥台的远平面的数字。

以下示例说明了p5.js中的frustum()函数：

例：

Javascript

function setup() { 
    
  // Create a canvas of the  
  // given size in WEBGL mode 
  createCanvas( 
    windowWidth, windowHeight, 
    WEBGL); 
    
  // Set the frustum of the camera 
  frustum(-2.5, 2.5, -0.6, 
          0.6, 1.0, 2000); 
} 
  
function draw() { 
    
  background(200); 
  orbitControl(); 
  strokeWeight(10); 
  stroke(0, 0, 255); 
  noFill(); 
  
  rotateX(map(mouseY, 0, height, 
              0, TWO_PI)); 
  rotateY(map(mouseX, 0, width, 
              0, TWO_PI)); 
    
  box(300);   
}

输出：

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

相关用法

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