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])
参数:detailX和detailY采用水平面上的顶点数,回调采用调用对象实例化的函数。
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