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 个参数，如上所述，如下所示：

• 模式：这是一个常数，它定义模式是设置为 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