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