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

p5.js 中的 debugMode() 函數用於通過添加指示幾何體的地麵的網格來可視化 3D 空間。它還可以顯示代表 3 個軸的圖標。網格可以在沒有參數的情況下創建，也可以根據所需的大小和偏移量進行自定義。可以使用 stroke() 和 strokeWeight() 函數指定描邊和顏色。網格和軸的圖標將基於當前畫布的大小。

用法:

debugMode()

debugMode(mode)

debugMode(mode, [gridSize], [gridDivisions], [xOff], 
                     [yOff], [zOff])

debugMode(mode, [axesSize], [xOff], [yOff], [zOff])

debugMode([gridSize], [gridDivisions], [gridXOff], [gridYOff],
[gridZOff], [axesSize], [axesXOff], [axesYOff], [axesZOff])

參數：這個函數有 13 個參數，如上所述，下麵給出：

mode:這是一個常量，用於定義模式是設置為 GRID 還是 AXES。
gridSize:它是一個數字，用於定義網格一側的大小。它是一個可選參數。
gridDivisions:它是一個數字，用於定義網格中的劃分數量。它是一個可選參數。
xOff:它是一個數字，用於定義 x 軸距原點的偏移量。它是一個可選參數。
yOff:它是一個數字，用於定義 y 軸距原點的偏移量。它是一個可選參數。
zOff:它是一個數字，用於定義 z 軸距原點的偏移量。它是一個可選參數。
axesSize:它是一個定義軸圖標大小的數字。它是一個可選參數。
gridXOff:它是一個數字，用於定義網格在 x 軸上的偏移量。它是一個可選參數。
gridYOff:它是一個數字，用於定義網格在 y 軸上的偏移量。它是一個可選參數。
gridZOff:它是一個數字，用於定義網格在 z 軸上的偏移量。它是一個可選參數。
axesXOff:它是一個數字，用於定義 x 軸線的偏移量。它是一個可選參數。
axesYOff:它是一個數字，用於定義 y 軸線的偏移量。它是一個可選參數。
axesZOff:它是一個數字，用於定義 z 軸線的偏移量。它是一個可選參數。

下麵的例子說明了 p5.js 中的 debugMode() 函數：

範例1：使用不帶任何參數的調試模式。

Javascript


function setup() {
    
  // Set canvas size
  createCanvas(600, 600, WEBGL);
    
  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();
    
  // Set the debug mode
  debugMode();
}
  
function draw() {
  background(200);
  orbitControl();
  box()
}

輸出：

範例2：使用 GRID 作為調試模式。

Javascript


function setup() {
    
  // Set canvas size
  createCanvas(600, 600, WEBGL);
    
  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();
    
  // Set the debugMode to GRID
  debugMode(GRID);
}
  
function draw() {
  background(200);
  orbitControl();
  box(70, 70, 70);
}

輸出：

範例3：使用 AXIS 作為調試模式。

Javascript


function setup() {
    
  // Set canvas size
  createCanvas(600, 600, WEBGL);
    
  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 0, 1, 0);
  normalMaterial();
    
  // Set the debugMode to AXES
  debugMode( AXES);
}
  
function draw() {
  background(200);
  orbitControl();
  box()
}

輸出：

範例4：通過指定網格大小、網格劃分和軸的偏移量來使用調試模式。

Javascript


function setup() {
    
  // Set canvas size
  createCanvas(600, 600, WEBGL);
    
  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 1, 1, 1);
  normalMaterial();
    
  // Set the debugMode with the
  // respective parameters
  debugMode(GRID, 150, 10, 1, 1, 1);
}
  
function draw() {
  background(200);
  orbitControl();
  box()
}

輸出：

範例5：通過指定網格大小、網格劃分、軸偏移和網格來使用調試模式。

Javascript


function setup() {
    
  // Set canvas size
  createCanvas(600, 600, WEBGL);
    
  // Set the camera
  camera(100, -40, 100, 0, 0, 0, 1, 1, 1);
  normalMaterial();
    
  // Set the debugMode with the
  // respective parameters
 debugMode(150, 10, 0, 1, 0, 20, 1, -50, 1);
    
}
  
function draw() {
  background(200);
  orbitControl();
  noStroke();
  box()
}

輸出：

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

相關用法

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