p5.js ortho()函数

p5.js 中的ortho()函数用于设置 3D 草图的正交投影。在此投影中，具有相同尺寸的所有对象都显示为相同大小，无论它们与相机的距离如何。 p5.ortho()方法位于 p5.js 库中的相机部分下。可选参数可用于指定相机在所有平面上的平截头体。

句法：

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

参数：此函数接受上面提到的六个参数，如下所述：

• 左：这是一个定义相机的平截头体左平面的数字。这是一个可选参数。
• 右：这是一个定义相机的平截头体右平面的数字。这是一个可选参数。
• bottom：这是一个定义相机的平截头体底平面的数字。这是一个可选参数。
• top：这是一个定义相机的平截头体顶平面的数字。这是一个可选参数。
• near：这是一个定义相机在平面附近的平截头体的数字。这是一个可选参数。
• far：它是一个数字，定义了相机的平截头体远平面。这是一个可选参数。

注意：这里，方括号括起来的参数是可选的。如果没有给出参数，那么 ortho() 中使用的默认参数是：

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

下面的例子说明了 ortho() p5.js 中的函数：

示例 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