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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。