p5.js ortho()用法及代碼示例

p5.js 中的 ortho() 函數用於設置 3D 草圖的正交投影。在這個投影中，所有具有相同尺寸的物體看起來都是相同的尺寸，無論它們與相機的距離如何。 p5.ortho() 方法位於 p5.js 庫中的相機部分。可選參數可用於指定相機在所有平麵中的平截頭體。

用法:

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

參數：該函數接受上述和以下所述的六個參數：

left:它是一個數字，用於定義相機的視錐左平麵。這是一個可選參數。
right:它是一個數字，定義了相機的平截頭體右平麵。這是一個可選參數。
bottom:它是一個定義相機平截頭體底部平麵的數字。這是一個可選參數。
top:它是一個定義相機平截頭體頂平麵的數字。這是一個可選參數。
near:它是一個定義相機在平麵附近的截錐體的數字。這是一個可選參數。
far:它是一個定義相機平截頭體遠平麵的數字。這是一個可選參數。

注意：這裏方括號中的參數是可選的。如果沒有給出參數，則 ortho() 中使用的默認參數是：

ortho(-width/2, width/2, -height/2, height/2)

以下示例說明了 p5.js 中的 ortho() 函數：

範例1：不使用正投影。

碼：

Javascript


function setup() {
  // Set the canvas
  createCanvas(600, 600, WEBGL);
}
function draw() {
  // Set the background
  background(175);
  // Set the point light of the sketch
  pointLight(255, 255, 255, 0, -200, 200);
  // Create multiple cubes in the plane
  for (let x = -200; x < 200; x += 50) {
    push();
    translate(x, 0, x - 200);
    rotateZ(frameCount * 0.02);
    rotateX(frameCount * 0.02);
    normalMaterial();
    box(50);
    pop();
  }
}

輸出：

不使用正投影

範例2：通過 ortho() 函數使用正交投影。

碼：

Javascript


function setup() {
  // Set the canvas
  createCanvas(600, 600, WEBGL);
}
function draw() {
  // Set the background
  background(175);
  // Use the orthographic projection
  ortho(-200, 200, 200, -200, 0.1, 1000);
  pointLight(255, 255, 255, 0, -200, 200);
  // Create multiple cubes in the plane
  for (let x = -200; x < 200; x += 50) {
    push();
    translate(x, 0, x - 200);
    rotateZ(frameCount * 0.02);
    rotateX(frameCount * 0.02);
    normalMaterial();
    box(50);
    pop();
  }
}

輸出：

使用正交投影

範例3：

碼：

Javascript


function setup() {
   
  // creating canvas with given dimensions
  createCanvas(400, 400,WEBGL);
   
  // calling ortho method with default parameters
  ortho();
}
function draw() {
  // creating a window with white background
  background(255);
   
  // used to control the objects in projection
  orbitControl();
   
  // it will the fill the object with colors,
  // so we can easily distinguish between two objects
  normalMaterial();
   
  // push will save the current drawing
  push();
   
  // translate will transform
  // the object by given width and height
  translate(30, 0);
   
  // box will draw box on the screen
  // with width,height and depth of 100
  box(100);
   
  // pop will load the saved drawing
  pop();
   
  // push will save the current drawing
  push();
   
  // translate will transform
  // the object by given width and height
  translate(-150,0);
   
  // box will draw box on the screen
  // with width,height and depth of 100
  box(50);
   
  // pop will load the saved drawing
  pop();
}

輸出：

使用正交投影

參考：https://p5js.org/reference/#/p5/ortho

相關用法

注：本文由純淨天空篩選整理自_sh_pallavi大神的英文原創作品 p5.js ortho() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。