P5.js | 球体()函数

在p5.js中，球体()函数是在3D空间中绘制立体球体的函数。此函数需要3个参数：球体半径，细分次数和细分度数（可选）。球体细分是将球体分割为许多更小的球体来创建更加平滑的外观。在本文中，我们将介绍如何使用球体()函数以及一些例子。

语法

sphere(radius, [detailX], [detailY])

• radius：球体的半径。必须是一个大于0的数字。
• detailX：可选，x轴细分次数。例如，当detailX 等于2时，在x轴上会有3个圆环。
• detailY：可选，y轴细分度数。例如，当detailY等于3时，每个圆环将被分成4个部分。

示例

以下是一个简单的程序，用于在默认坐标系中绘制一个半径为50的球体：

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  sphere(50);
}

以上代码首先创建一个400x400的画布和3D渲染器，然后在每帧循环中绘制一个半径为50的球体。结果如下所示：

细分

您可以使用细分参数来控制球体的平滑程度。以下是一个使用detailX和detailY参数的示例：

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  // 细分3次在y轴上，细分5次在x轴上
  sphere(50, 5, 3);
}

运行以上代码，将在x轴上分为5个圆环，在y轴上分为3个部分，如下所示：

着色

您可以通过使用ambientMaterial()或specularMaterial()函数为球体增加颜色或材质。以下是一个使用specularMaterial()函数的示例：

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  // 设置材质
  specularMaterial(255);
  // 细分3次在y轴上，细分5次在x轴上
  sphere(50, 5, 3);
}

以上代码将使用默认颜色并将材质设置为具有高光反射的白色，结果如下所示：

旋转

您可以使用rotateX()，rotateY()和rotateZ()函数来旋转球体。以下是一个使用rotateY()函数的示例：

let angle = 0;

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  // 旋转球体
  rotateY(angle);
  // 细分3次在y轴上，细分5次在x轴上
  sphere(50, 5, 3);
  // 自增角度
  angle += 0.03;
}

以上代码将在y轴上旋转球体，并且使用每帧循环增加角度值来持续旋转。结果如下所示：

结论

在p5.js中，您可以使用球体()函数创建3D球体。通过指定半径，细分次数和细分度数，可以控制球体的大小和形状。您还可以使用材质和颜色对球体进行着色或使用旋转函数来对球体进行动画化处理。希望这篇文章可以帮助您学习和使用p5.js的sphere()函数。