第五章学习使用几何图形

在前几章中，您学习了很多关于如何使用Three.js的知识。现在您知道了如何创建基本场景、添加照明和配置网格的材质。在第2章“构成Three.js场景的基本组件”中，我们谈到了（但没有真正深入探讨）Three.js提供的可用于创建3D对象的可用几何图形。在本章和第6章“探索高级几何体”中，我们将带您了解Three.js开箱即用提供的所有几何体（除了Three.Line，我们在第4章“使用Three.jss材料”中讨论过它）。

在本章中，我们将介绍以下几何图形：

• THREE.CircleGeometry
• THREE.RingGeometry
• THREE.PlaneGeometry
• THREE.ShapeGeometry
• THREE.BoxGeometry
• THREE.SphereGeometry
• THREE.CylinderGeometry
• THREE.ConeGeometry
• THREE.TorusGeometry
• THREE.TorusKnotGeometry
• THREE.PolyhedronGeometry
• THREE.IcosahedronGeometry
• THREE.OctahedronGeometry
• THREE.TetraHedronGeometry
• THREE.DodecahedronGeometry

在我们研究Three.js提供的几何图形之前，我们将首先深入研究Three..js如何在内部将几何图形表示THREE.BufferGeometry。在一些文档中，您可能仍然会遇到THREE.Geometry作为所有几何图形的基础对象。在新版本中，THREE.BufferGeometry完全取代了这一点，它通常提供更好的性能，因为它可以很容易地将数据传输到GPU。然而，它比旧的THREE.Geometry更难使用。

使用THREE.BufferGeometry，几何体的所有属性都由一组属性标识。属性基本上是一个数组，其中包含一些额外的元数据，其中包含有关顶点位置的信息。属性还用于存储有关顶点的附加信息，用于例如，它的颜色。要使用属性定义顶点和面，请使用THREE.BufferGeometry的以下两个属性：

• attributes：attributes 属性用于存储可以直接传递给GPU。例如，为了定义形状，可以定义Float32Array，其中每三个值定义一个顶点的位置。

  然后，这三个顶点中的每一个都被解释为一个面。这可以在THRE.BufferGeometry中定义如下： geometry.setAttribute( 'position', new THREE.BufferAttribute( arrayOfVertices, 3 ) );.

• index：默认情况下，不需要显式定义面（每三个连续位置都被解释为一个面），但使用index属性，我们可以显式定义顶点一起形成一个面：geometry.setIndex( indicesArray );

对于使用本章中的几何图形，您不需要考虑这些内部属性，因为在Three.js负责在构造几何图形时正确设置它们。但是，如果要从头开始创建几何图形，则需要使用上一个列表中显示的属性。

在Three.js中，我们有几个生成二维网格的几何图形，以及大量创建三维网格的几何图形。在本章中，我们将讨论以下主题：

• 2D geometries 二维几何图形
• 3D geometries 三维几何图形

二维几何图形

二维对象看起来像平面对象，而且，顾名思义，只有二维空间。在本节中，我们将首先查看二维几何图形：

THREE.CircleGeometry, THREE.RingGeometry, THREE.PlaneGeometry, 和THREE.ShapeGeometry.

THREE.PlaneGeometry

THRE.PlaneGeometry对象可以用于创建一个非常简单的二维矩形。有关此几何体的示例，请参阅本章来源中的plane-generatry.html示例。使用THRE.PlaneGeometry创建的矩形显示在以下屏幕截图中：

图5.1：平面几何图形

在本章的示例中，我们添加了一个控制GUI，您可以使用它来控制几何体的属性（在本例中为宽度、高度、宽度分段和高度分段）width, height, widthSegments, 和 heightSegments ，还可以更改材质（及其属性）、禁用阴影和隐藏地平面。例如，如果要查看此形状的各个面，可以通过禁用地平面并启用选定材质的 wireframe 线框特性来轻松显示这些面：

图5.2：作为线框的平面几何图形

创建一个 THREE.PlaneGeometry 对象非常简单，其操作方法如下：

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

在本例中，对于THRE.PlaneGeometry，可以更改这些特性，并直接查看其对生成的三维对象的影响。以下列表中显示了这些属性的说明：

• width:这是矩形的宽度。
• height: 这是矩形的高度。
• widthSegments: 这是宽度应该划分的段数。默认为1。
• heightSegments: 这是高度应该划分成的线段数。默认为1。

如你所见，这并不是一个非常复杂的几何图形。你只需指定大小，然后你就完成了。如果要创建更多面（例如，当要创建方格图案时），则可以使用“widthSegments”和“heightSegments”属性将几何图形划分为更小的面。

如果你想在创建几何体后访问其属性，你不能只说plane.width。要访问几何体的属性，你必须使用对象的parameters属性。因此，要获得我们在本节中创建的平面对象的width属性，您必须使用plane.parameters.width。

THREE.CircleGeometry

您可能已经猜到THRE.CirleGeometry创建了什么。使用此几何图形，可以创建一个非常简单的二维圆（或圆的一部分）。首先，让我们看看这个几何体的例子circle-geometry.html。

图5.3-二维圆的几何图形

在本例中，您可以看到并控制通过使用THRE.CirleGeometry创建的网格。2*PI以弧度表示一个完整的圆。如果你更喜欢使用度数而不是弧度，在它们之间转换是非常容易的。

以下两个功能可以帮助您在弧度和度之间进行转换，如下所示：

const deg2rad = (degrees) => (degrees * Math.PI) / 180
const rad2deg = (radians) => (radians * 180) / Math.PI

当你创建 THREE.CircleGeometry，你可以指定一些属性来定义圆圈的外观，如下所示：

• radius：圆的半径定义了其大小。半径是从圆的中心到其边缘的距离。默认值为50。
• segments：此属性定义了用于创建圆的面数。最小数字为3，如果未指定，则此数字默认为8。值越高，表示圆就越光滑。
• thetaStart：此属性定义了要开始绘制圆的位置。此值的范围可以为0到2 * PI，并且默认值为0。
• thetaLength：此属性定义了圆圈的完整程度。未指定时，默认为2*PI（全圆）。例如，如果为此值指定0.5 * PI，将得到一个四分之一圆。使用此属性和Start属性来定义圆的形状。

仅指定 radius 半径和 segments 段，可以创建一个完整的圆：

new THREE.CircleGeometry(3, 12)

如果你想从这个几何图形中创建半个圆，你可以使用这样的东西：

new THREE.CircleGeometry(3, 12, 0, Math.PI);

这将创建一个半径为3的圆，该圆被拆分为12个线段。圆从默认值0开始，只画到一半，因为我们将thetaLength指定为Math.PI，即半个圆。

在转到下一个几何体之前，这里有一个关于Three.js在创建这些2D形状（THRE.PlaneGeometry、THRE.CirleGeometry，THRE.RingGeometry和THRE.ShapeGeometry）时使用的方向的快速注释：Three.jss创建这些直立的对象，所以它们沿着x-y平面排列。这是非常合乎逻辑的，因为它们是2D形状。但是，通常情况下，尤其是使用THRE.PlaneGeometry时，您希望网格躺在地面上（x-z平面），作为某种地面区域，您可以在其上定位其他对象。创建水平方向而非垂直方向的二维对象的最简单方法是围绕网格的x轴向后旋转四分之一（-PI/2），如下所示：

mesh.rotation.x =- Math.PI/2;

以上就是THREE.CircleGeometry的全部内容。下一个几何体THREE.RingGeometry看起来很像THREE.CircleGeometry。

THREE.RingGeometry

使用THREE.RingGeometry，您可以创建一个二维对象，该对象不仅与THREE.CircleGeometry非常相似，还可以在中心定义一个孔（请参见ring-geometry.html）：

图5.4-2D环的几何图

创建THREE.RingGeometry对象时，可以使用以下属性：

• innerRadius：圆的内径定义了中心孔的尺寸。如果此属性设置为0，则不会显示任何孔。默认值为0。

• outerRadius：圆的外半径决定了它的大小。半径是从圆心到圆心边缘的距离。默认值为50。

• thetaSegments：这是将用于创建圆的对角线线段的数量。值越高，表示环越平滑。默认值为8。

• phiSegments：这是沿着环的长度需要使用的段的数量。默认值为8。这并不会真正影响圆的平滑度，但会增加面的数量。

• thetaStart：这定义了开始绘制圆的位置。此值的范围可以是0到2*PI，默认值为0。

• thetaLength：这定义了圆的完整程度。如果未指定，则默认为2*PI（一个完整的圆）。例如，如果为此值指定0.5*PI，则会得到一个四分之一圆。将此属性与thetaStart属性一起使用以定义圆环的形状。

以下屏幕截图显示了thetaStart和thetaLength如何使用THREE.RingGeometry：

图5.5-具有不同theta的2D环的几何形状

在下一节中，我们将查看2D形状的最后一个： THREE.ShapeGeometry

THREE.ShapeGeometry

THREE.PlaneGeometry和THREE.CircleGeometry自定义其外观的方法有限。如果要创建自定义二维形状，可以使用THREE.ShapeGeometry。

使用THREE.ShapeGeometry，您可以调用几个函数来创建自己的形状。您可以将此功能与＜path/＞元素功能进行比较，后者也可用于HTML画布元素和SVG。让我们从一个例子开始，然后，我们将向您展示如何使用各种函数来绘制自己的形状。shape-geometry.html示例可以在本章的源代码中找到。

下面的屏幕截图显示了此示例：

图5.6-一个自定义的形状几何图形

在本例中，可以看到自定义创建的二维造型。在介绍属性之前，首先让我们看一下用于创建此形状的代码。在创建THREE.ShapeGeometry对象之前，我们首先必须创建一个THREE.Shape对象。你可以通过查看上一张截图来追踪这些步骤，我们从右下角开始。以下是我们如何创建一个THREE.Shape对象：

const drawShape = () => {
 // 创建基本形状
 const shape = new THREE.Shape()
 // 开始点
 // 直线向上
 shape.lineTo(10, 40)
 // 图的顶部，向右的曲线
 shape.bezierCurveTo(15, 25, 25, 25, 30, 40)
 // 样条曲线后退
 shape.splineThru([new THREE.Vector2(32, 30), new
 THREE.Vector2(28, 20), new THREE.Vector2(30, 10)])
 // 添加“眼孔”一个
 const hole1 = new THREE.Path()
 hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true)
 shape.holes.push(hole1)
 // 添加“眼孔2”
 const hole2 = new THREE.Path()
 hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true)
 shape.holes.push(hole2)
 // 添加“口”
 const hole3 = new THREE.Path()
 hole3.absarc(20, 16, 2, 0, Math.PI, true)
 shape.holes.push(hole3)
 return shape
}

在这段代码中，您可以看到我们使用直线、曲线和样条曲线创建了该形状的轮廓。之后，我们使用THRE.shape的holes属性将多个孔冲压成这个形状。

不过，在本节中，我们谈论的是THREE.ShapeGeometry，而不是THREE.Shape——要从THREE.Shape创建一个几何体，我们需要传入THREE.Shape（在我们的例子中，从drawShape（）函数返回）作为THREE.Shape geometry的参数。您也可以传入一个THREE.Shape对象的数组，但在我们的示例中，我们只使用一个对象：

new THREE.ShapeGeometry(drawShape())

此函数的结果是可以用于创建网格的几何体。除了要转换为THRE.ShapeGeometry的形状外，还可以传入许多其他选项对象作为第二个参数：

• curveSegments：此属性确定根据形状创建的曲线的平滑程度。默认值为12。
• material：这是materialIndex属性，用于为指定形状创建的面。因此，如果传入多个材质，则可以指定这些材质中的哪些材质应应用于所创建的造型的面。
• UVGenerator：将纹理与材质一起使用时，UV贴图将确定纹理的哪个部分用于特定的面。使用UVGenerator属性，您可以传入自己的对象，这将为为传入的形状创建的面创建UV设置。有关UV设置的更多信息，请参阅第10章“加载和使用纹理”。如果未指定，则使用THREE.ExtrudeGeometry.WorldUVGenerator。

THREE.ShapeGeometry最重要的部分是THREE.Shape，您可以使用它来创建形状，所以让我们看看可以用于创建THREE.Shape的绘图函数列表。形状：

• moveTo(x，y)：将图形位置移动到指定的x和y坐标。
• lineTo(x，y)：从当前位置（例如，由moveTo函数设置）到已提供的x和y坐标绘制一条线。
• quadraticCurveTo(aCPx，aCPy，x，y)：指定曲线有两种不同的方式。您可以使用quadraticCurveTo函数，也可以使用bezierCurveTo函数。这两个函数之间的区别在于如何指定曲线的曲率。

对于二次曲线，我们需要指定一个额外的点（使用aCPx和aCPy参数），并且曲线仅基于该点，当然还有指定的端点（来自x和y参数）。对于三次曲线（由bezierCurveTo函数使用），可以指定另外两个点来定义曲线。起点是路径的当前位置。

下图说明了这两个选项之间的区别：

图5.7：二次贝塞尔和三次贝塞尔

• bezierCurveTo（aCPx1，aCPy1，aCPx2，aCPy2，x，y）：根据提供的参数绘制曲线。有关说明，请参阅上一个列表条目。曲线是基于定义曲线的两个坐标（aCPx1、aCPy1、aCPx2和aCPy2）以及终点坐标（x和y）绘制的。起点是路径的当前位置。
• splineThru（pts）：此函数通过提供的一组坐标绘制流体线，（pts。）。此参数应该是THRE.VVector2对象的数组。起点是路径的当前位置。
• arc（aX、aY、aRadius、aStartAngle、aEndAngle、aClockwise）：用于绘制圆（或圆的一部分）。圆从路径的当前位置开始。这里，aX和aY被用作从当前位置的偏移。请注意，aRadius设置圆的大小，aStartAngle和aEndAngle定义绘制圆的一部分的大小。布尔的aClockwise属性确定圆是顺时针绘制还是逆时针绘制。
• absArc（aX，aY，aRadius，aStartAngle，aEndAngle，顺时针）：请参见圆弧特性的描述。位置是绝对的，而不是相对于
• 当前位置。
• ellipse（aX、aY、xRadius、yRadius、aStartAngle、aEndAngle、a顺时针）：请参见圆弧特性的描述。此外，使用椭圆函数，我们可以分别设置x半径和y半径。
• absEllipse（aX，aY，xRadius，yRadius，aStartAngle，aEndAngle，aClockwise）：请参阅椭圆属性的描述。相反，这个位置是绝对的
• 相对于当前位置的。
• fromPoints（vectors）：如果将THRE.Vector2（或THREE.Vector3）对象的数组传递到此函数中，THREE.js将使用所提供向量的直线创建路径。
• holes：holes属性包含一个由THREE.Shape对象组成的数组。此阵列中的每个对象都渲染为一个孔。我们在本节开头看到的例子就是一个很好的例子。在那个代码片段中，我们向这个数组添加了三个three.Shape对象：一个用于左眼，一个用于右眼，还有一个用于我们主要的three.Ship对象的嘴。

就像许多示例一样，要了解各种特性如何影响最终形状，最简单的方法是只启用材质上的线框特性，并使用设置。例如，下面的屏幕截图显示了当您使用curveSegments的低值时会发生什么：

图5.8-形状几何图形的线框

正如你所看到的，这个形状失去了它漂亮的圆形边缘，但在这个过程中使用的面要少得多。这是对2D的形状。下面的部分将显示和解释基本的三维形状。

三维几何图形

在关于基本三维几何体的这一节中，我们将从我们已经见过几次的几何体开始：THREE.BoxGeometry

THREE.BoxGeometry

THREE.BoxGeometry是一个非常简单的三维几何体，允许您通过指定长方体的宽度、高度和深度属性来创建长方体。我们添加了一个示例box-geometry.html，您可以在其中使用这些属性。以下屏幕截图显示了此几何图形：

图5.9-基本的三维盒子几何图形

如您在本例中看到的，通过更改THREE.BoxGeometry的宽度、高度和深度属性，可以控制生成网格的大小。创建新多维数据集时，这三个属性也是必需的，如下所示：

new THREE.BoxGeometry(10,10,10);

在本例中，您还可以看到可以在多维数据集上定义的其他属性。以下列表说明了所有属性：

• width：这是立方体的宽度。这是立方体顶点沿x轴的长度。
• height：这是立方体的高度。这是立方体顶点沿y轴的长度。
• depth：这是立方体的深度。这是立方体顶点沿z轴的长度。
• widthSegments：这是我们沿着立方体的x轴将一个面划分为的线段数量。默认值为1。定义的线段越多，边的面就越多。如果此属性和接下来的两个属性设置为1，则立方体的每一侧将只有2个面。如果此特性设置为2，则面将被划分为2个线段，从而产生4个面。
• heightSegments：这是我们沿着立方体的y轴将一个面划分为的线段数量。默认值为1。
• depthSegments：这是我们沿着立方体的z轴将一个面划分为的线段数量。默认值为1。

通过增加各种分段属性，可以将立方体的六个主面划分为更小的面。如果要使用THRE.MeshFaceMaterial在立方体的各个部分上设置特定的材质特性，则此选项非常有用。

THREE.BoxGeometry是一个非常简单的几何体。另一个简单的是THREE.SphereGeometry

THREE.SphereGeometry

使用THREE.SphereGeometry，可以创建三维球体。让我们直接进入示例sphere-geometry.html：

图5.10-简单的三维球体几何图形

在之前的屏幕截图中，我们向您展示了一个基于THREE.SphereGeometry创建的半开放球体。该几何体非常灵活，可以用于创建各种与球体相关的几何体。不过，一个基本的THREE.SphereGeometry实例可以很容易地创建：new THREE.SphereGeometry（）。

以下属性可用于调整结果网格的外观：

• radius：用于设置球体的半径。这定义了生成的网格的大小。默认值为50。
• widthSegments：这是要垂直使用的分段数量。分段越多表示曲面越平滑。默认值为8，最小值为3。
• heightSegments：这是要水平使用的分段数量。分段越多，球体的曲面就越平滑。默认值为6，最小值为2。
• phiStart：这决定了沿着球体的x轴从何处开始绘制球体。这可以在0到2*PI的范围内。默认值为0。
• phiLength：这决定了要绘制的球体离phiStart有多远。2*PI将绘制一个完整的球体，0.5*PI 将绘制四分之一开放球体。默认值为2*PI。
• thetaStart：确定沿x轴绘制球体的起点。这可以在0到2*PI的范围内，默认值为0。
• thetaLength：这决定了绘制球体时离θ起点有多远。2*PI值是一个完整的球体，而PI将只绘制球体的一半。默认值为2*PI。

半径、宽度分段和高度分段属性应该是清晰的。我们已经在其他例子中讨论过这些性质。phiStart、phiLength、thetaStart和thetaLength属性在不看示例的情况下有点难以理解。不过，幸运的是，您可以从sphere-geometry.html示例中的菜单中尝试这些属性，并创建有趣的几何图形，例如：

图5.11-具有不同性能和性能性质的球几何

列表上的下一个是 THREE.CylinderGeometry。

THREE.CylinderGeometry

使用此几何图形，我们可以创建圆柱体和圆柱体对象。对于所有其他的几何图形，我们还有一个例子（cylinder-geometry.html），可以让你实验这个几何图形的属性，其屏幕截图如下：

图5.12-三维圆柱体的几何形状

当您创建THREE.CylinderGeometry时，没有任何强制参数，所以您可以通过调用new THREE.CyllinderGeometrix（）来创建圆柱体。您可以传入许多属性，如您在前面的示例中看到的，以更改此圆柱体的外观。以下列表说明了这些特性：

• radiusTop：设置此圆柱体将位于顶部的尺寸。默认值为20。
• radiusBottom：这设置了此圆柱体位于底部的尺寸。默认值为20。
• height：此属性设置圆柱体的高度。默认高度为100。
• radialSegments：这决定了沿圆柱体半径的分段数量。默认值为8。分段越多，表示圆柱体越平滑。
• heightSegments：这决定了沿圆柱体高度的分段数量。默认值为1。分段越多意味着面越多。
• openEnded：这确定网格是否在顶部和底部闭合。默认值为false。
• thetaStart：这决定了从何处开始沿圆柱体的x轴绘制圆柱体。这可以在0到2*PI的范围内，默认值为0。
• thetaLength：这决定了绘制圆柱体时离 thetaStart 有多远。2*PI 值是一个完整的圆柱体，而PI只绘制圆柱体的一半。默认值为2*PI。

这些都是您可以用于配置圆柱体的非常基本的属性。不过，一个有趣的方面是，您对顶部（或底部）使用负半径值。如果这样做，则可以使用此几何图形创建沙漏状形状，如下屏幕截图所示：

图5.13-作为沙漏的三维圆柱体几何形状

这里需要注意的一点是，在这种情况下，上半部分是由内而外的。如果您使用的材料没有配置为 THREE.DoubleSide，你不会看到上半部分。

下一个几何体是THREE.ConeGeometry，它提供了THREE.CylinderGeometry的基本功能，但顶部半径固定为零。

THREE.ConeGeometry

THREE.ConeGeometry与THREE.CylinderGeometry几乎相同。它使用所有相同的属性，只是它只允许您设置半径，而不是单独的半径顶部和底部值：

图5.14-简单的三维圆锥体几何图形

THREE.ConeGeometry 可以设置以下属性：

• radius：这设置了此圆柱体将位于底部的大小。默认值为20。
• height：此属性设置圆柱体的高度。默认高度为100。
• radialSegments：这决定了沿圆柱体半径的分段数量。默认值为8。分段越多，表示圆柱体越平滑。
• heightSegments：这决定了沿圆柱体高度的分段数量。默认值为1。分段越多意味着面越多。
• openEnded：这确定网格是否在顶部和底部闭合。默认值为false。
• thetaStart：这决定了从何处开始沿圆柱体的x轴绘制圆柱体。这可以在0到 2*PI 的范围内，默认值为0。
• thetaLength：这决定了绘制圆柱体时离 thetaStart 有多远。2*PI值是一个完整的圆柱体，而PI只绘制圆柱体的一半。默认值为2*PI。

下一个几何图形，THREE.TorusGeometry ，允许你创建一个甜甜圈形状的对象。

THREE.TorusGeometry

环面是一个简单的形状，看起来像一个甜甜圈。下面的屏幕截图，你可以通过打开torus-geometry.html示例得到你自己的屏幕截图，显示了 THREE.TorusGeometry 结构：

图5.15-三维环面几何图形

就像大多数简单的几何体一样，在创建THREE.TorusGeometry时没有任何强制参数。以下列表提到了创建此几何体时可以指定的参数：

• radius：设置整个圆环体的大小。默认值为100。
• tube：设置圆管的半径（实际的圆环）。该属性的默认值为40。
• radialSegments：这决定了沿圆环体长度使用的分段数量。默认值为8。请参见示例中更改此值的效果。
• tubularSegments：这决定了沿环面宽度使用的分段数量。默认值为6。请参见示例中更改此值的效果。
• arc：使用此属性，可以控制圆环体是否绘制完整的圆。该值的默认值为2*PI（一个完整的圆）。

其中大多数都是您已经看到的非常基本的属性。然而，arc特性是一个非常有趣的特性。使用此属性，可以定义圆环是圆整圈还是只圆部分。通过尝试此特性，可以创建非常有趣的网格，例如以下将圆弧设置为小于2*PI的值的网格：

图5.16-具有较小圆弧特性的三维环面几何图形

THREE.TorusGeometry 是一种非常简单的几何。在下一节中，我们将研究一个几乎同名但不那么简单的几何体：THRE.TorusKnotGeometry。

THREE.TorusKnotGeometry

使用THREE.TorusKnotGeometry，可以创建圆环结。圆环结是一种特殊的结，看起来像一根绕自己几圈的管子。解释这一点的最好方法是查看torus-knot-geometry.html示例。以下屏幕截图显示了此几何图形：

图5.17-环面结的几何形状

如果您打开这个例子并使用p和q属性，您可以创建各种漂亮的几何图形。p属性定义了结绕其轴缠绕的频率，q定义了结围绕其内部缠绕的频率。

如果这听起来有点模糊，不要担心。你不需要理解这些属性来创建漂亮的结，比如下面的截图中所示的结（对于那些对细节感兴趣的人，Wolfram在https://mathworld.wolfram.com/TorusKnot.html）：上有一篇关于这个主题的好文章

图5.18-具有不同p和q值的环面结的几何形状

通过此几何体的示例，您可以尝试使用以下属性，并查看p和q的各种组合对此几何体的影响：

• radius：设置整个圆环体的大小。默认值为100。
• tube：设置圆管的半径（实际的圆环）。该属性的默认值为40。
• radialSegments：这决定了沿圆环结长度使用的分段数量。默认值为64。在演示中查看更改此值的效果。
• tubularSegments：这决定了沿圆环结宽度使用的节段数量。默认值为8。在演示中查看更改此值的效果。
• p：这定义了结的形状，默认值为2。
• q：这定义了结的形状，默认值为3。
• heightScale：使用此属性，可以拉伸圆环结。默认值为1。

列表上的下一个几何图形是最后一个基本几何图形：THREE.PolyhedronGeometry

THREE.PolyhedronGeometry

使用此几何体，可以轻松创建多面体。多面体是一种只有平面和直边的几何体。不过，大多数情况下，您不会直接使用THREE.PolyhedronGeometry。THREE.js提供了许多特定的多面体，您可以使用这些多面体，而无需指定THREE.Polyedron几何的顶点和面。我们将在本节稍后讨论这些多面体。

如果你真的想直接使用THREE.PolyhedronGeometry，你必须指定顶点和面（就像我们在第3章中对立方体所做的那样，在THREE.js中使用光源）。例如，我们可以创建一个简单的四面体（也可以参见本章中关于THREE.TetrahedronGeometrics的部分），如下所示：

const vertices = [
 1, 1, 1,
-1, -1, 1,
-1, 1, -1,
 1, -1, -1
];
const indices = [
2, 1, 0,
0, 3, 2,
1, 3, 0,
2, 3, 1
];
new THREE.PolyhedronBufferGeometry(vertices, indices, radius, 
detail)

要构建THREE.PolyhedronGeometry，我们传入顶点、索引、半径和细节属性。生成的THRE.PolhedronGeometry对象显示在多面体geometry.html示例中：

图5.19-自定义多面体

在创建多面体时，可以传递以下四个属性：

• vertices：这些是构成多面体的点。
• indices：这些是需要从顶点创建的面。
• radius：这是多面体的大小。默认值为1。
• detail：使用此属性，可以向多面体添加额外的细节。如果将此值设置为1，则多面体中的每个三角形将拆分为4个较小的三角形。如果将此值设置为2，则这4个较小的三角形将再次拆分为4个较小三角形，依此类推。

下面的截图显示了相同的自定义网格，但现在有了更高级的细节：

图5.20-一个具有更高级别的细节的自定义多面体

在本节的开头，我们提到Three.js附带了几个开箱即用的多面体。在下面的小节中，我们将快速向您展示这些内容。所有这些多面体类型都可以通过查看多面体geometry.html示例来查看。

THREE.IcosahedronGeometry

THREE.IcosahedronGeometry 创建一个多面体，该多面体由12个顶点创建20个相同的三角形面。创建此多面体时，只需指定半径和详细程度即可。此屏幕截图显示了一个使用THREE.IcosahedronGeometry 创建的多面体：

图5.21-三维二十面体几何图

我们要看的下一个多面体是：THREE.TetrahedronGeometry

THREE.TetrahedronGeometry

四面体是最简单的多面体之一。这个多面体只包含由四个顶点创建的四个三角形面。您可以像THREE.js提供的其他多面体一样，通过指定半径和细节级别来创建THREE.TetrahedronGeometry。以下是使用THREE.TetrahedronGeometry创建的四面体的屏幕截图：

图5.22-三维四面体的几何形状

接下来，我们将看到一个有八个面的多面体：一个八面体

THREE.OctahedronGeometry

Three.js还提供了一个八面体的实现。顾名思义，这个多面体有八个面。这些面是由六个顶点创建的。以下屏幕截图显示了此几何图形：

图5.23-三维八面体几何图

我们要看的最后一个多面体是一个十二面体

THREE.DodecahedronGeometry

Three.js提供的最后一个多面体几何是Three.DodechedronGeometry。这个多面体有12个面。以下屏幕截图显示了此几何图形：

图5.24-三维十二面体几何图

如您所看到的，Three.js提供了大量的三维几何，从直接有用的几何，如球体和立方体到在实践中可能不是那么有用的几何，如多面体集合。在任何情况下，这些3D几何图形都将为您创建和实验材料、几何图形和3D场景提供一个很好的起点。

总结

在本章中，我们讨论了Three.js提供的所有标准几何图形。正如你所看到的，有很多几何形状你可以开箱即用。为了更好地学习如何使用几何图形，请对其进行实验。使用本章中的示例了解可以用于自定义Three.js中提供的标准几何图形集的属性。

对于2D形状，重要的是要记住它们被放置在x-y平面上。如果要水平地生成二维形状，则必须围绕x轴旋转网格0.5*PI。最后，请注意，如果您正在旋转二维形状或打开的三维形状（例如，圆柱体或管），请记住将材质设置为THREE.DoubleSide。如果不这样做，几何体的内部或背面将不会显示。

在本章中，我们将重点关注简单、直接的网格。Three.js还提供了创建复杂几何图形的方法，我们将在第6章中介绍。