📜  p5.js Geometry() 方法

📅  最后修改于: 2022-05-13 01:56:26.474000             🧑  作者: Mango

p5.js Geometry() 方法

p5.Geometry() 方法用于表示 3d 对象。它由loadModel()函数返回,也由 3d 图元绘图函数在内部使用。

此函数需要 p5.dom 库。因此,在index.html文件的 head 部分添加以下行

Javascript


Javascript
function setup() { 
   
    // Create Canvas of given size 
    var cvs = createCanvas(400, 300);
}
    
function draw() {
      
  // Set the background color
  background('pink'); 
    
  // Creating rectangle at center of canvas
  rectMode(CENTER);
    
  // Initializing a rect geometry 
  geo = new p5.Geometry(
    rect(200,150,190,120)
  );
    
  // Adding text to the geometry figure
  text('GeeksforGeeks', 160, 150);
}


句法:

new p5.Geometry([detailX], [detailY], [callback])

参数:detailXdetailY采用水平面上的顶点数,回调采用调用对象实例化的函数。

p5.Geometry 类中的可用方法:

Sr.no.

Methods

Description

1.

computeFaces()

It used to compute the faces for geometry objects based on the vertices.

2.

computeNormals()

It used to compute the smooth normals per vertex as an average of each face.

3.

averageNormals()

It is used in curved surfaces to compute the average vertex normals.

4.

averagePoleNormals()

It is used in spherical primitives to compute the average pole normals.

5.

normalize()

It will modify all vertices to be centered within the range -100 to 100.

例子:

Javascript

function setup() { 
   
    // Create Canvas of given size 
    var cvs = createCanvas(400, 300);
}
    
function draw() {
      
  // Set the background color
  background('pink'); 
    
  // Creating rectangle at center of canvas
  rectMode(CENTER);
    
  // Initializing a rect geometry 
  geo = new p5.Geometry(
    rect(200,150,190,120)
  );
    
  // Adding text to the geometry figure
  text('GeeksforGeeks', 160, 150);
}
  • new p5.Geometry( rect(200,150,190,120)) 中, 200 用于指定 x 轴,150 用于 y 轴,190 是矩形的宽度,120 是矩形的高度。
  • 类似地,在文本中,160 是 x 轴位置,150 是相对于画布屏幕的 y 轴位置。

输出:

参考: https://p5js.org/reference/#/p5.Geometry