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

p5.Geometry()方法用於表示3d對象。它由loadModel()函數返回，也由3d圖元繪圖函數在內部使用。

此函數需要p5.dom庫。因此，請在index.html文件。

Javascript


<script language="javascript" 
    type="text/javascript" src="path/to/p5.dom.js">
</script>

用法:

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

參數：detailX而detailY接收水平麵上的頂點數，callback接收一個函數來調用對象實例化。

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()	它將所有頂點修改為在-100到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);
}

在新的p5.Geometry(rect(200,150,190,120))中，200用於指定x軸，150用於y軸，190是矩形的寬度，120是矩形的高度。
類似地，在文本中，相對於畫布屏幕，160是x軸位置，而150是y軸位置。

輸出：

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

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