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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。