几何体（geometry）

优质

小牛编辑

127浏览

2023-12-01

几何体组件为实体提供基本形状。这个 primitive属性定义常规形状。在计算机图形学中，几何基元是不可分的基本形状。通常还定义一个材质组件来创建完整的网孔（Mesh）。

属性	描述	默认值
buffer	将几何体转换为BufferGeometry以减少内存使用，但代价是更难操作。	true
primitive	几何体的名称（例如，下面列出的几何体之一）。确定几何图形类型以及可用的其他特性。	box
skipCache	禁用从缓存中检索共享几何体对象。	false

内置几何体

`box`

box几何体定义长方体（即，任何四边形，而不仅仅是立方体）。

<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"></a-entity>

属性	描述	默认值
width	X轴上的边的宽度（米）。	1
height	Y轴上的边的高度（米）。	1
depth	Z轴上的边的深度（米）。	1

`circle`

circle几何体创建平面的二维圆形。这些可以完成圆形或部分圆形（像吃豆人）。注意，因为圆是平的，如果我们不在material组件上指定side: double，A-Frame将只会渲染圆的一个面：

<a-entity geometry="primitive: circle; radius: 1" material="side: double"></a-entity>

属性	描述	默认值
radius	圆的半径（米）。	1
segments	构造圆的三角形数，如比萨饼片。分段数越大，圆就越圆。	32
thetaStart	第一段的起始角度。可用于定义部分圆。	0
thetaLength	中心角（度）。默认设置为`360`，形成一个完整的圆。	360

`thetaLength` 和 `thetaStart` 属性

以度为单位，thetaStart定义圆或弧的起始位置 thetaLength定义圆或圆弧的终点。如果我们想制作一个（形状，我们将从圆的一半开始，将长度定义为一半一个圆圈。我们可以通过thetaStart:180；thetaLength:180来实现这一点。或者如果我们想要制作一个）形状，我们可以使用代码thetaStart: 0; thetaLength: 180

常见的使用场景可能是设置动画thetaStart以创建旋转加载的效果，或者在基于凝视的光标上设置thetaLength动画以获得视觉反馈。

`cone`

圆锥体几何体是具有不同顶部和底部半径的圆柱体几何体。

<a-entity geometry="primitive: cone; radiusBottom: 1; radiusTop: 0.1"></a-entity>

属性	描述	默认值
height	圆锥体的高度。	2
openEnded	圆锥体的末端是打开的（true）还是盖上的（false）。	false
radiusBottom	圆锥体底端的半径。	1
radiusTop	圆锥体顶端的半径。	1
segmentsRadial	圆锥体周长周围的分段面数。	36
segmentsHeight	沿圆锥体高度的面行数。	18
thetaStart	起始角度（度）。	0
thetaLength	以度为单位的中心角。	360

`cylinder`

圆柱体几何体创建传统意义上的圆柱体，比如可乐瓶子，但它也可以定义形状，如管状和弧形表面。

我们可以使用高度和半径创建基本圆柱体：

<a-entity geometry="primitive: cylinder; height: 3; radius: 2"></a-entity>

我们可以通过使圆柱体开口来创建一个管子，这样可以移除顶部以及圆柱体的底面，以便内部可见。然后我们需要双面材质才能正确渲染：

<!-- Tube -->
<a-entity geometry="primitive: cylinder; openEnded: true" material="side: double"></a-entity>

我们可以通过thetaLength指定弧来创建曲面圆柱体，开放而不完全闭合，然后使用双面材质：

<!-- Curved surface -->
<a-entity geometry="primitive: cylinder; openEnded: true; thetaLength: 180"
          material="side: double"></a-entity>

属性	描述	默认值
radius	圆柱体的半径。	1
height	圆柱体的高度。	2
segmentsRadial	圆柱体周长周围的分段面数。	36
segmentsHeight	沿圆柱体高度的面行数。	18
openEnded	圆柱体的端部是打开的（true）还是盖上的（false）。	false
thetaStart	起始角度（度）。	0
thetaLength	以度为单位的中心角。	360

我们能通过改变径向段的数量（即侧面）创建 prisms，例如，要制作六角棱镜：

<!-- Hexagonal prism -->
<a-entity geometry="primitive: cylinder; segmentsRadial: 6"></a-entity>

`dodecahedron`

十二面体几何体创建具有十二个大小相等的面的多边形。

<a-entity geometry="primitive: dodecahedron; radius: 2"></a-entity>

属性	描述	默认值
radius	Radius (in meters) of the dodecahedron.	1

`octahedron`

八面体几何体创建具有八个等边三角形面的多边形。

<a-entity geometry="primitive: octahedron"></a-entity>

属性	描述	默认值
radius	四面体的半径（米）。	1

`plane`

平面几何体用来创建平面。因为平面是平的，A-Frame默认将仅呈现平面的一个面，除非我们为material组件指定side:double。

<a-entity geometry="primitive: plane; height: 10; width: 10" material="side: double"></a-entity>

属性	描述	默认值
width	沿X轴的宽度。	1
height	沿Y轴的高度。	1
segmentsHeight	Y轴上的分割面数。	1
segmentsWidth	X轴上的分段面数。	1

`ring`

环几何体创建一个平面环，比如CD。因为ring是平面，A-Frame将只渲染环的一个面，除非我们为material组件指定side： double。

<a-entity geometry="primitive: ring; radiusInner: 0.5; radiusOuter: 1"
          material="side: double"></a-entity>

属性	描述	默认值
radiusInner	圆环内孔半径。	1
radiusOuter	圆环外缘半径。	1
segmentsTheta	分段数。数字越大，环就越圆。	32
segmentsPhi	由segmentsTheta定义的每个面内的三角形数。	8
thetaStart	起始角度（度）。	0
thetaLength	以度为单位的中心角。	360

`sphere`

球体几何体创建sphere（例如，balls）。我们可以创建一个基本球体：

<a-entity geometry="primitive: sphere; radius: 2"></a-entity>

We can create polyhedrons and abstract shapes by specifying the number of horizontal angles and faces:

<a-entity geometry="primitive: sphere; segmentsWidth: 2; segmentsHeight: 8"></a-entity>

属性	描述	默认值
radius	球体的半径。	1
segmentsWidth	水平段数。	18
segmentsHeight	垂直段数。	36
phiStart	水平起始角。	0
phiLength	水平扫描角度大小。	360
thetaStart	垂直起始角。	0
thetaLength	垂直扫描角度大小。	360

`tetrahedron`

四面体几何体创建具有四个三角形面的多边形。

<a-entity geometry="primitive: tetrahedron; radius: 2"></a-entity>

属性	描述	默认值
radius	四面体的半径（米）。	1

`torus`

圆环体几何体创建圆环体或曲管形状，比如甜甜圈：

<!-- Half donut -->
<a-entity geometry="primitive: torus; radius: 2; radiusTubular: 0.5; arc: 180"></a-entity>

属性	描述	默认值
radius	圆环体外缘的半径。	1
radiusTubular	管子的半径。	0.2
segmentsRadial	沿管端圆周的段数。数字越大，意味着管子就越圆。	36
segmentsTubular	沿管面周长的段数。数字越大，意味着管子就越圆。	32
arc	中心角。	360

`torusKnot`

环形结几何体创建一个圆环结形状。一对互质整数p和q定义了圆环结的特定形状。如果p和q不是互质的，结果将是一个环面：

<a-entity geometry="primitive: torusKnot; p: 3; q:7"></a-entity>

属性	描述	默认值
radius	包含圆环结的半径。	1
radiusTubular	圆环结管的半径。	0.2
segmentsRadial	沿管端圆周的段数。数字越大，意味着管子就越圆。	36
segmentsTubular	沿管面周长的段数。数字越大，意味着管子就越圆。	32
p	几何结构绕着它的旋转对称轴旋转多少次。	2
q	几何体绕着圆环内部的圆旋转多少次。	3

`triangle`

三角形几何体创建平面二维三角形。因为三角形是平的，A-Frame只渲染一个面，即具有vertexA、vertexB和vertexC以逆时针顺序出现在屏幕上，除非我们指定了material组件side:double。

<a-entity geometry="primitive: triangle" material="side: double"></a-entity>

属性	描述	默认值
vertexA	三个顶点之一的坐标	0 0.5 0
vertexB	三个顶点之一的坐标	-0.5 -0.5 0
vertexC	三个顶点之一的坐标	0.5 -0.5 0

注册自定义几何体

我们可以使用 AFRAME.registerGeometry 来注册自定义几何体并创建实例为 THREE.Geometry 的一个对象。A-Frame使用此API注册所有内置几何图形。以下是A-Frame注册 box几何体的方式：

AFRAME.registerGeometry('box', {
  schema: {
    depth: {default: 1, min: 0},
    height: {default: 1, min: 0},
    width: {default: 1, min: 0},
    segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
    segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
    segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
  },

  init: function (data) {
    this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
  }
});

与注册组件一样，我们提供一个名称，一个模式 schema来暴露该几何体的属性和生命周期方法。然后我们需要创建几何体并通过init生命周期方法设置 this.geometry

当几何体组件将其primitive属性设置为自定义几何体的name时，我们可以在几何体组件上设置自定义几何体的属性。假设我们注册了一个自定义几何体：

AFRAME.registerGeometry('example', {
  schema: {
    vertices: {
      default: ['-10 10 0', '-10 -10 0', '10 -10 0'],
    }
  },

  init: function (data) {
    var geometry = new THREE.Geometry();
    geometry.vertices = data.vertices.map(function (vertex) {
        var points = vertex.split(' ').map(function(x){return parseInt(x);});
        return new THREE.Vector3(points[0], points[1], points[2]);
    });
    geometry.computeBoundingBox();
    geometry.faces.push(new THREE.Face3(0, 1, 2));
    geometry.mergeVertices();
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    this.geometry = geometry;
  }
});

然后我们可以在HTML中使用自定义几何体：

<a-entity geometry="primitive: example; vertices: 1 1 -3, 3 1 -3, 2 2 -3"></a-entity>

几何体（geometry）

目录

内置几何体

box

circle

thetaLength 和 thetaStart 属性

cone

cylinder

dodecahedron

octahedron

plane

ring

sphere

tetrahedron

torus

torusKnot

triangle