五、学习使用几何图形

在前面的章节中，您学习了很多关于如何使用 Three.js 的知识。您知道如何创建基本场景、添加照明以及为网格配置材质。在第 2 章、组成三个. js 场景的基本组件中，我们触及到了三个. js 提供的可用几何图形，并且您可以使用这些几何图形来创建您的 3D 对象，但没有真正深入这些几何图形的细节。在这一章和下一章中，我们将带您浏览 Three.js 提供的所有几何图形(除了我们在上一章中讨论的THREE.Line)。在本章中，我们将研究以下几何图形:

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

在下一章中，我们将了解以下复杂的几何图形:

• THREE.ConvexGeometry
• THREE.LatheGeometry
• THREE.ExtrudeGeometry
• THREE.TubeGeometry
• THREE.ParametricGeometry
• THREE.TextGeometry

所以让我们来看看 Three.js 提供的所有基本几何图形。

Three.js 提供的基本几何图形

在《三维空间》中，我们有两种几何形状可以生成二维网格，还有大量的几何形状可以生成三维网格。在本节中，我们将首先查看 2D 几何:THREE.CircleGeometry、THREE.RingGeometry、THREE.PlaneGeometry和THREE.ShapeGeometry。之后，我们将探索所有可用的基本 3D 几何图形。

二维几何图形

二维物体看起来像平面物体，顾名思义，只有二维。列表中的第一个二维几何图形是THREE.PlaneGeometry。

三。平面几何

一个PlaneGeometry 对象可以用创建一个非常简单的二维矩形。关于这个几何图形的例子，请看本章资料中的01-basic-2d-geometries-plane.html例子。使用PlaneGeometry创建的矩形如下图所示:

创建这个几何图形非常简单，如下所示:

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

在本例中对于THREE.PlaneGeometry，您可以更改这些属性，并直接查看它对生成的 3D 对象的影响。下表显示了这些属性的说明:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | width | 是 | 这是矩形的宽度。 | | height | 是 | 这个是矩形的高度。 | | widthSegments | 不 | 这个就是宽度应该划分的段数。这默认为1。 | | heightSegments | 不 | 这个就是身高应该划分的段数。这默认为1。 |

如你所见，这不是一个非常复杂的几何图形。你只要指定尺寸，就完成了。如果您想要创建更多的面(例如，当您想要创建方格图案时)，您可以使用widthSegments和heightSegments属性将几何图形分成更小的面。

在我们继续下一个几何图形之前，这里有一个关于这个例子中使用的材质的快速注释，我们也在本章的大多数其他例子中使用它。我们使用以下方法基于几何图形创建网格:

function createMesh(geometry) {

  // assign two materials
  var meshMaterial = new THREE.MeshNormalMaterial();
  meshMaterial.side = THREE.DoubleSide;
  var wireframeMaterial = new THREE.MeshBasicMaterial();
  wireFrameMaterial.wireframe = true;

  // create a multimaterial
  var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,[meshMaterial,wireframeMaterial]);
  return mesh;
}

在此功能中，我们基于所提供的网格创建多材质网格。首先使用的材质是THREE.MeshNormalMaterial。如您在上一章中所学，THREE.MeshNormalMaterial根据其法向量(面的方向)创建彩色面。我们还将此材质设为双面(THREE.DoubleSide)。如果我们不这样做，当这个物体的背面对着摄像机时，我们就看不到它。除了THREE.MeshNormalMaterial之外，我们还添加了THREE.MeshBasicMaterial，在这里我们启用了线框属性。这样，我们可以很好地看到对象的三维形状和为特定几何图形创建的面。

类型

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

三。圆周测量法

你可以大概已经猜出THREE.CircleGeometry创造了什么。使用这种几何图形，您可以创建一个非常简单的二维圆(或部分圆)。我们先来看这个几何图形的例子，02-basic-2d-geometries-circle.html。在下面的截图中，你可以找到一个例子，我们用一个小于2 * PI的thetaLength值创建了THREE.CircleGeometry:

注意2 * PI代表一个完整的弧度圆。如果你更愿意使用度数而不是弧度，那么在它们之间转换是非常容易的。以下两个函数可以帮助您在弧度和度数之间进行转换，如下所示:

function deg2rad(degrees) {
  return degrees * Math.PI / 180;
}

function rad2deg(radians) {
  return radians * 180 / Math.PI;
}

在本例中，您可以看到并控制使用THREE.CircleGeometry创建的网格。创建THREE.CircleGeometry时，可以指定几个属性来定义圆的外观，如下所示:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | radius | 不 | 圆的半径定义了它的大小。半径是从圆心到其边的距离。默认值为50。 | | segments | 不 | 这个属性定义了用于创建圆的面的数量。最小数量为3，如未指定，该数量默认为8。更高的值意味着更平滑的圆。 | | thetaStart | 不 | 这个属性定义了开始画圆的位置。该值的范围可以从0到2 * PI，默认值为0。 | | thetaLength | 不 | 该属性定义圆完成的程度。未指定时，默认为2 * PI(一整圈)。例如，如果您为该值指定0.5 * PI，您将获得四分之一圆。将该属性与thetaStart属性一起使用来定义圆的形状。 |

您可以使用以下代码片段创建一个完整的圆:

new THREE.CircleGeometry(3, 12);

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

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

在进入下一个几何图形之前，先快速记下 Three.js 在创建这些二维形状(THREE.PlaneGeometry、THREE.CircleGeometry和THREE.ShapeGeometry)时使用的方向:Three.js 创建这些直立的对象，因此它们沿着 x - y 平面放置。这非常符合逻辑，因为它们是二维形状。然而，通常情况下，尤其是使用THREE.PlaneGeometry时，您希望网格平放在地面上(x - z平面)—某种地面区域，您可以在其上放置其他对象。创建水平方向而非垂直方向的二维对象的最简单方法是绕其 x 轴向后旋转网格四分之一圈(-PI/2)，如下所示:

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

THREE.CircleGeometry到此为止。下一个几何图形THREE.RingGeometry，看起来很像THREE.CircleGeometry。

三。环形几何

使用 THREE.RingGeometry，您可以创建一个 2D 对象，该对象不仅与THREE.CircleGeometry非常相似，还允许您在中心定义一个孔(参见03-basic-3d-geometries-ring.html):

THREE.RingGeometry没有任何必需的属性(默认值见下表)，因此要创建此几何图形，您只需指定以下内容:

Var ring = new THREE.RingGeometry();

通过将以下参数传递给构造函数，可以进一步自定义环形几何图形的外观:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | innerRadius | 不 | 圆的内半径定义了中心孔的大小。如果该属性设置为0，则不会显示孔。默认值为0。 | | outerRadius | 不 | 圆的外半径决定了它的大小。半径是从圆心到其边的距离。默认值为50。 | | thetaSegments | 不 | 这个是将用于创建圆的对角线段的数量。更高的值意味着更平滑的环。默认值为8。 | | phiSegments | 不 | 这个是沿环的长度需要使用的段数。默认值为8。这不会真正影响圆的平滑度，但会增加面的数量。 | | thetaStart | 不 | 这个定义了开始画圆的位置。该值的范围可以从0到2 * PI，默认值为0。 | | thetaLength | 不 | 这个定义了圆完成的程度。未指定时，默认为2 * PI(一整圈)。例如，如果您为该值指定0.5 * PI，您将获得四分之一圆。将该属性与thetaStart属性一起使用来定义圆的形状。 |

在下一节中，我们将查看最后一个二维形状:THREE.ShapeGeometry。

三。形状几何

THREE.PlaneGeometry和THREE.CircleGeometry有限定的自定义外观的方式。如果想要创建自定义二维形状，可以使用THREE.ShapeGeometry。借助THREE.ShapeGeometry，您可以调用几个函数来创建自己的形状。您可以将此功能与同样适用于 HTML 画布元素和 SVG 的<path>元素功能进行比较。让我们从一个例子开始，然后，我们将向您展示如何使用各种功能来绘制您自己的形状。04-basic-2d-geometries-shape.html的例子可以在本章的来源中找到。下面的截图显示了这个例子:

在本例中，您可以看到自定义创建的二维形状。在开始描述属性之前，首先让我们看一下用于创建该形状的代码。在创建THREE.ShapeGeometry之前，我们首先要创建THREE.Shape。您可以通过查看前面的截图来追踪这些步骤，我们从右下角开始。以下是我们如何创建THREE.Shape:

function drawShape() {
  // create a basic shape
  var shape = new THREE.Shape();

  // startpoint
  shape.moveTo(10, 10);

  // straight line upwards
  shape.lineTo(10, 40);

  // the top of the figure, curve to the right
  shape.bezierCurveTo(15, 25, 25, 25, 30, 40);

  // spline back down
  shape.splineThru(
    [new THREE.Vector2(32, 30),
      new THREE.Vector2(28, 20),
      new THREE.Vector2(30, 10),
    ])

  // curve at the bottom
  shape.quadraticCurveTo(20, 15, 10, 10);

  // add 'eye' hole one
  var hole1 = new THREE.Path();
  hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true);
  shape.holes.push(hole1);

  // add 'eye hole 2'
  var hole2 = new THREE.Path();
  hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true);
  shape.holes.push(hole2);

  // add 'mouth'
  var hole3 = new THREE.Path();
  hole3.absarc(20, 16, 2, 0, Math.PI, true);
  shape.holes.push(hole3);

  // return the shape
  return shape;
}

在这段代码中，您可以看到我们使用直线、曲线和样条曲线创建了这个形状的轮廓。之后，我们利用THREE.Shape的holes属性在这个形状上打孔。然而，在这一部分，我们谈论的是THREE.ShapeGeometry而不是THREE.Shape。要从THREE.Shape创建几何图形，我们需要传入THREE.Shape(在我们的例子中从drawShape()函数返回)作为THREE.ShapeGeometry的参数，如下所示:

new THREE.ShapeGeometry(drawShape());

该函数的结果是一个可用于创建网格的几何图形。当你已经有一个形状时，还有一种创建THREE.ShapeGeometry的替代方法。您可以调用shape.makeGeometry(options)，它将返回一个THREE.ShapeGeometry的实例(有关选项的解释，请参见下表)。

我们先来看看可以传入THREE.ShapeGeometry的参数:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | shapes | 是 | 这些是一个或多个用于创建THREE.Geometry的THREE.Shape对象。您可以传入单个THREE.Shape对象或一组THREE.Shape对象。 | | options | 不 | 您也可以传入一些options，它们应用于所有通过shapes参数传入的形状。这里给出了这些选项的解释:

• curveSegments:该属性决定了从形状创建的曲线的平滑程度。默认值为12。
• material:这是用于为指定形状创建的面的materialIndex属性。当您将THREE.MeshFaceMaterial与该几何图形一起使用时，materialIndex属性确定传入的材质中的哪一种用于传入的形状的面。
• UVGenerator:当你在材质中使用纹理时，UV 贴图决定了纹理的哪一部分用于特定的面。使用UVGenerator属性，您可以传入自己的对象，该对象将为传入的形状创建的面创建紫外线设置。更多关于紫外线设置的信息可以在第 10 章、加载和处理纹理中找到。如果未指定，则使用THREE.ExtrudeGeometry.WorldUVGenerator。

|

THREE.ShapeGeometry最重要的部分是THREE.Shape，你用它来创建形状，那么我们来看看你可以用来创建THREE.Shape的绘图功能列表(注意这些实际上是THREE.Path对象的功能，从这里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函数使用)，可以指定另外两个点来定义曲线。起点是路径的当前位置。 | | bezierCurveTo(aCPx1, aCPy1, aCPx2, aCPy2, x, y) | 根据所提供的论据画出一条曲线。有关解释，请参见上一个表条目。曲线基于定义曲线的两个坐标(aCPx1、aCPy1、aCPx2和aCPy2)和终点坐标( x 和 y )绘制。起点是路径的当前位置。 | | splineThru(pts) | 该功能通过提供的坐标组(pts)绘制一条流体线。这个参数应该是THREE.Vector2对象的数组。起点是路径的当前位置。 | | arc(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) | 这个画一个圆(或者圆的一部分)。圆从路径的当前位置开始。这里，aX和aY用作相对于当前位置的偏移。注意aRadius设置圆的大小，aStartAngle和aEndAngle定义圆的一部分画得有多大。布尔属性aClockwise决定是顺时针还是逆时针画圆。 | | absArc(aX, aY, aRadius, aStartAngle, aEndAngle, AClockwise) | 参见arc的描述。该位置是绝对的，而不是相对于当前位置。 | | ellipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise) | 参见arc的描述。另外，通过ellipse功能，我们可以分别设置 x 半径和 y 半径。 | | absEllipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise) | 参见ellipse的描述。该位置是绝对的，而不是相对于当前位置。 | | fromPoints(vectors) | 如果您将一组THREE.Vector2(或THREE.Vector3)对象传递到这个函数中，Three.js 将使用提供的向量中的直线创建一个路径。 | | holes | holes属性包含一组THREE.Shape对象。该数组中的每个对象都呈现为一个孔。这方面的一个很好的例子是我们在本节开头看到的例子。在那个代码片段中，我们向这个数组添加了三个THREE.Shape对象。一个用于左眼，一个用于右眼，一个用于我们主要THREE.Shape对象的嘴巴。 |

在本例中，我们使用新的THREE.ShapeGeometry(drawShape()))构造器从THREE.Shape对象创建了THREE.ShapeGeometry。THREE.Shape对象本身也有一些辅助功能，你可以用来创建几何图形。它们如下:

|

名字

|

描述

| | --- | --- | | makeGeometry(options) | 此从THREE.Shape返回THREE.ShapeGeometry。有关可用选项的更多信息，请查看我们之前讨论过的THREE.ShapeGeometry的属性。 | | createPointsGeometry(divisions) | 这将形状转换为一组点。divisions属性定义返回多少个点。如果该值较高，则返回更多的点，结果线更平滑。这些划分分别适用于路径的每个部分。 | | createSpacedPointsGeometry(divisions) | 甚至这将形状转换为一组点，但这一次，立即将分割应用于完整的路径。 |

创建一组点时，使用createPointsGeometry或createSpacedPointsGeometry；您可以使用创建的点绘制一条线，如下所示:

new THREE.Line( shape.createPointsGeometry(10), new THREE.LineBasicMaterial( { color: 0xff3333, linewidth: 2 } ) );

当您点击示例中的点或点按钮时，您会看到类似如下的内容:

这就是二维形状。下一部分将展示和解释基本的三维形状。

三维几何图形

在这个关于基本三维几何的部分，我们将从我们已经见过几次的几何开始:THREE.BoxGeometry。

三。盒几何

THREE.BoxGeometry 是一个非常简单的 3D 几何体，允许你通过指定它的宽度、高度和深度来创建一个盒子。我们增加了一个例子，05-basic-3d-geometries-cube.html，在这里你可以玩这些属性。下面的截图显示了这个几何图形:

如本例所示，通过更改THREE.BoxGeometry的width、height和depth属性，可以控制生成网格的大小。创建新多维数据集时，这三个属性也是必需的，如下所示:

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

在该示例中，您还可以看到可以在多维数据集上定义的一些其他属性。下表解释了所有属性:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | Width | 是 | 这是立方体的宽度。这是立方体顶点沿 x 轴的长度。 | | height | 是 | 这个就是立方体的高度。这是立方体顶点沿 y 轴的长度。 | | depth | 是 | 这个就是立方体的深度。这是立方体顶点沿 z 轴的长度。 | | widthSegments | 不 | 这个是我们沿着立方体的 x 轴将一个面分成的线段数。默认值为1。 | | heightSegments | 不 | 这个是我们沿着立方体的 y 轴将一个面分成的线段数。默认值为1。 | | depthSegments | 不 | 这个是我们沿着立方体的 z 轴将一个面分成的线段数。默认值为1。 |

通过增加各种线段属性，可以将立方体的六个主面分成更小的面。如果您想使用THREE.MeshFaceMaterial设置立方体各部分的特定材质属性，这非常有用。THREE.BoxGeometry是一个非常简单的几何图形。另一个简单的例子是THREE.SphereGeometry。

三。球面测量法

通过 SphereGeometry，可以创建三维球体。让我们直接进入示例06-basic-3d-geometries-sphere.html:

在之前的截图中，我们展示了一个基于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到PI，默认值为0。 | | thetaLength | 不 | 这个决定了球体距离phiStart有多远。PI值是一个完整的球体，而0.5 * PI将只绘制球体的上半部分。默认值为PI。 |

radius、widthSegments、heightSegments属性要清晰。我们已经在其他例子中看到了这些属性。phiStart、phiLength、thetaStart、thetaLength属性不看例子有点难理解。幸运的是，您可以在06-basic-3d-geometries-sphere.html示例的菜单中试验这些属性，并创建有趣的几何图形，例如:

名单上的下一个是THREE.CylinderGeometry。

三。圆柱几何

通过这个几何图形，我们可以创建圆柱体和类似圆柱体的物体。至于所有其他几何图形，我们还有一个示例(07-basic-3d-geometries-cylinder.html)让您实验这个几何图形的属性，其截图如下:

当你创建THREE.CylinderGeometry时，没有任何强制性的参数。所以你只需要调用new THREE.CylinderGeometry()就可以创建一个圆柱体。您可以传入许多属性，如示例中所示，以改变此圆柱体的外观。下表说明了这些属性:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | radiusTop | 不 | 该设置该气缸顶部的尺寸。默认值为20。 | | radiusBottom | 不 | 这个设置这个圆柱体底部的尺寸。默认值为20。 | | height | 不 | 该属性设置圆柱体的高度。默认高度为100。 | | radialSegments | 不 | 这个决定了沿着圆柱体半径的线段数。这默认为8。更多的线段意味着更平滑的圆柱体。 | | heightSegments | 不 | 这个决定了沿着圆柱体高度的线段数。默认值为1。更多的片段意味着更多的面孔。 | | openEnded | 不 | 这决定了网格是否在顶部和底部闭合。默认值为false。 |

这些都是可以用来配置圆柱体的非常基本的属性。然而，一个有趣的方面是，当你对顶部(或底部)使用负半径时。如果您这样做，您可以使用这个几何图形来创建一个沙漏状的形状，如下图所示。这里需要注意的一点是，从颜色可以看出，这种情况下的上半部分是内翻的。如果使用没有配置THREE.DoubleSide的材质，就看不到上半部分。

下一个几何图形是THREE.TorusGeometry，你可以用它来创建类似甜甜圈的形状。

三。环几何

圆环是一个简单的形状，看起来像一个甜甜圈。下面的截图，你可以通过打开08-basic-3d-geometries-torus.html的例子来获得，展示了THREE.TorusGeometry的动作:

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

|

财产

|

命令的

|

描述

| | --- | --- | --- | | radius | 不 | 此设置完整圆环体的大小。默认值为100。 | | tube | 不 | 此设置管的半径(实际的甜甜圈)。该属性的默认值为40。 | | radialSegments | 不 | 这个决定了沿圆环长度使用的线段数。默认值为8。在演示中查看更改该值的效果。 | | tubularSegments | 不 | 这个决定了沿圆环宽度使用的线段数。默认值为6。在演示中查看更改该值的效果。 | | arc | 不 | 利用这个属性，可以控制圆环面是否画满圆。该值的默认值为2 * PI(一整圈)。 |

这些大多数都是你已经看到的非常基本的属性。然而arc属性是一个非常有趣的属性。使用此属性，您可以定义圆环是形成一个完整的圆还是只形成一个部分圆。通过实验这个属性，你可以创建非常有趣的网格，比如下面这个弧形设置为0.5 * PI的网格:

THREE.TorusGeometry 是一个非常直白的几何图形。在下一节中，我们将看一个几乎与它同名但不那么简单的几何图形:THREE.TorusKnotGeometry。

三。环形几何

有了 THREE.TorusKnotGeometry，你就可以创建一个环面结了。环面结是一种特殊的结，看起来像一根绕着自己缠绕了几次的管子。解释这一点的最好方法是看09-basic-3d-geometries-torus-knot.html的例子。下面的截图显示了这个几何图形:

如果你打开这个例子，玩玩p和q属性，你可以创建各种美丽的几何图形。p属性定义结绕其轴缠绕的频率，q定义结绕其内部缠绕的频率。如果这听起来有点模糊，别担心。你不需要了解这些属性就可以创建漂亮的结，比如下面截图中显示的那个(对于那些对细节感兴趣的人，维基百科在http://en.wikipedia.org/wiki/Torus_knot有一篇关于这个主题的好文章):

以此几何图形的为例，您可以使用以下属性并查看p和q的各种组合对该几何图形的影响:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | radius | 不 | 这将设置整个圆环的大小。默认值为100。 | | tube | 不 | 此设置管的半径(实际的甜甜圈)。该属性的默认值为40。 | | radialSegments | 不 | 这个决定了沿着环面结的长度要使用的线段数。默认值为64。在演示中查看更改该值的效果。 | | tubularSegments | 不 | 这个决定了沿着环面结的宽度要使用的线段数。默认值为8。在演示中查看更改该值的效果。 | | p | 不 | 这个定义了结的形状，默认值为2。 | | q | 不 | 这个定义了结的形状，默认值为3。 | | heightScale | 不 | 有了这个属性，就可以拉长圆环结了。默认值为1。 |

列表中的下一个几何图形是最后一个基本几何图形:THREE.PolyhedronGeometry。

三。多面体几何

有了这个几何图形，你可以轻松创建多面体。多面体是一种只有平面和直边的几何图形。然而，大多数情况下，你不会直接使用这个几何图形。Three.js 提供了许多你可以直接使用的特定多面体，而不必指定THREE.PolyhedronGeometry的顶点和面。我们将在本节稍后讨论这些多面体。如果您确实想直接使用THREE.PolyhedronGeometry，您必须指定顶点和面(就像我们在第 3 章、中对立方体所做的那样，使用三个. js 中可用的不同光源)。例如，我们可以创建一个简单的四面体(参见本章中的THREE.TetrahedronGeometry)如下:

var vertices = [
  1,  1,  1, 
  -1, -1,  1, 
  -1,  1, -1, 
  1, -1, -1
];

var indices = [
  2, 1, 0, 
  0, 3, 2, 
  1, 3, 0, 
  2, 3, 1
];

polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, indices, controls.radius, controls.detail));

为了构建THREE.PolyhedronGeometry，我们传入vertices、indices、radius和detail属性。生成的THREE.PolyhedronGeometry对象显示在10-basic-3d-geometries-polyhedron.html示例中(选择右上角菜单中的类型为:自定义:

创建多面体时，可以传入以下四个属性:

|

财产

|

命令的

|

描述

| | --- | --- | --- | | vertices | 是 | 这些就是组成多面体的点。 | | indices | 是 | 这些是需要从顶点创建的面。 | | radius | 不 | 这是多面体的大小。这默认为1。 | | detail | 不 | 使用这个属性，你可以给多面体添加额外的细节。如果将此设置为1，多面体中的每个三角形将被分割成四个更小的三角形。如果您将此设置为2，那四个较小的三角形将再次被分成四个较小的三角形，以此类推。 |

在这一节的开始，我们提到了 Three.js 附带了几个开箱即用的多面体。在下面的小节中，我们将快速向您展示这些。

所有这些多面体类型都可以通过查看09-basic-3d-geometries-polyhedron.html示例来查看。

三。二十面体测量学

THREE.IcosahedronGeometry创建一个多面体，该多面体有 20 个由 12 个顶点创建的相同的三角形面。创建这个多面体时，你只需要指定radius和detail两个级别。此截图显示了使用THREE.IcosahedronGeometry创建的多面体:

三。四面体几何

四面体是最简单的多面体之一。此多面体仅包含从四个顶点创建的四个三角形面。通过指定radius和detail级别，您可以创建THREE.TetrahedronGeometry，就像 Three.js 提供的其他多面体一样。下面的截图显示了使用THREE.TetrahedronGeometry创建的四面体:

三。八面体几何

Three.js 还提供了八面体的实现。顾名思义，这个多面体有 8 个面。这些面是从 6 个顶点创建的。下面的截图显示了这个几何图形:

三。十二面体几何

Three.js 提供的最终多面体几何是THREE.DodecahedronGeometry。这个多面体有 12 个面。下面的截图显示了这个几何图形:

这是本章的结尾，介绍了由 Three.js 提供的基本二维和三维几何图形

总结

在这一章中，我们讨论了所有的标准几何。正如你所看到的，有很多几何图形你可以直接使用。为了更好地学习如何使用几何图形，请尝试几何图形。使用本章中的示例来了解可以用来定制从 Three.js 获得的标准几何图形集的属性。当您从几何图形开始时，选择一种基本材质也是一件好事；不要直接去找复杂的材质，而是从THREE.MeshBasicMaterial开始，线框设置为true，或者THREE.MeshNormalMaterial。这样，你就能更好地了解一个几何图形的真实形状。对于二维形状，重要的是要记住它们放置在 x - y 平面上。如果你想有一个水平的二维形状，你将不得不围绕-0.5 * PI的 x 轴旋转网格。最后，注意如果你旋转的是二维形状，或者是打开的三维形状(例如，圆柱体或管子)，记得将材质设置为THREE.DoubleSide。如果不这样做，几何图形的内部或背面将不会显示。

在本章中，我们将重点放在简单、直接的网格上。Three.js 还提供了创建复杂几何图形的方法。在下一章中，您将学习如何创建这些。*

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/728.html