语言设定

在 WebGL 中创建自定义几何体

p5.js 有许多基本形状，如box()或sphere()，但 p5.js 也能够呈现复杂的自定义几何体，无论是从3D模型文件还是从代码中。本教程将演示如何将3D模型导入到 p5.js，以及如何从头开始创建几何体。

如果您是 3D 新手，请查看坐标和变换教程。

目录

  1. 从文件中加载3D模型
  2. 创建基本过程几何体
  3. 结论
  4. 词汇表

从文件中加载3D模型

可以使用 OBJ 或 STL 文件将自定义几何体导入 p5.js。这些文件通常是在诸如 Blender 之类的 3D 建模工具中生成的，该工具在构建 3D 场景时提供了更多控制。 这是使用loadModel()方法完成的，应在preload()中使用。loadModel() 方法，应在 preload() 中使用。然后可以使用function 在模型中进行绘制，如下面的示例所示。 model() ，使用绘制函数在模型中进行绘制，如下面的示例所示。

自定义模型可能遇到的常见问题是缩放。根据模型的构建方式，在 p5.js 中呈现时其大小可能会完全不同，甚至过小以至于无法渲染。 loadModel()方法包括一个 normalize 参数，可以将模型调整为在p5.js中更好运行的大小。

请注意，当前不支持带有颜色的 STL 文件，但是您可以使用材料或纹理添加颜色，您可以在样式和外观教程中学习。 样式和外观 教程。

创建基本过程几何体

几何体还可以使用代码进行过程化定义。这是创建可以移动或使用您自己的一组规则形成的几何体的绝佳方式。 有许多方法可以使用它们在 p5.js 中类似于 2D 绘图的方式创建 3D 几何体。例如， quad()、triangle()、rect() 和 circle() 等方法都有额外的参数，使它们可以用于 3D。

还有其他方法可以更好地控制几何体。可以使用beginShape()、 vertex() 和 endShape() 逐点定义形状。 下面的示例演示了如何使用这些方法在数学上构建 3D 形状。 beginShape(), vertex(), 和 endShape(). 下面的示例演示了如何使用这些方法在数学上构建 3D 形状。

还有一个强大的类，p5.Geometry，p5.js 内部使用 loadModel()，但也可用于定义自定义几何体，提供可以有助于计算面和法线的工具。 p5.Geometry，p5.js 内部使用loadModel()，但也可用于定义自定义几何体，提供可以有助于计算面和法线的工具。

在 3D 中，面指的是由三个或四个点组成的集合，这些点形成了一个表面，使我们的几何体具有实体的外观。法线是垂直于面的方向，这有助于 p5.js 计算表面上的光照。

an illustration a collection of three points, constituting a face, and an arrow extending perpendicular to it, the normal

在下面的示例中，使用 p5.Geometry 绘制几何体的网格点。然后，computeFaces() 用于使几何体具有实体外观， computeNormals() 允许我们的几何体具有适当的照明。

结论

现在，您应该能够创建自定义的几何体，从其他工具或代码中创建独特的形状变为可能。花一些时间使用各种 3D 建模工具，以便找到最适合您的那个。

其他教程

这个教程是关于使用 p5.js 中 WebGL 基础的系列之一。以下是其他教程：

词汇表

过程化的

意味着某物是通过数学定义的，而不是通过存储的数据，例如文件。

模型

几何形状的表示。

STL

"STL"（通常代表“标准制图语言”）是用于 3D 模型的文件格式。它仅存储有关几何形状的信息。

OBJ

"OBJ" 是一种开放的文件格式，它存储几何数据以及一些材质和纹理数据。在 p5.js 中，我们只能使用它的几何数据，尽管仍可以使用纹理将图像映射到表面。

面

介于三点之间生成的固定表面。

法线

垂直于面的方向，通常在计算照明或使用材料时需要。

规范化

更改某物以适应标准范围。