几何体（geometry）

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

目录

• 基础属性
• 内置几何体
  • box
  • circle
  • cone
  • cylinder
  • dodecahedron
  • octahedron
  • plane
  • ring
  • sphere
  • tetrahedron
  • torus
  • torusKnot
• 注册自定义几何图形

基础属性

每种几何图形类型都具有以下属性：

内置几何体

box

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

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

circle

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

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

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>

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>

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

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

dodecahedron

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

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

octahedron

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

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

plane

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

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

ring

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

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

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

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

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

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

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

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

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);
  }
});

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;
  }
});

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