geometry

ジオメトリコンポーネントは、エンティティの基本的な形状を提供します。primitiveプロパティは、一般的な形状を定義する。ジオメトリプリミティブは、コンピュータグラフィックスでは、還元できない基本的な形状のことである。マテリアルコンポーネントは一般的に、完全なメッシュを作成するために、形状と一緒に外観を提供するために定義される。

# Base Properties

全てのジオメトリ対応には次のプロパティが備わっています。

# Built-in Geometries

# box　ボックス

ボックスジオメトリは、ボックス（立方体だけでなく、あらゆる四角形）を定義します。

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

# circle　円

円形ジオメトリは、平らな2次元の円を作成します。これらは完全な円でも部分的な円（パックマンのような）でもかまいません。 注：円は平らなので、マテリアルコンポーネントに side: double を指定しない場合、A-Frame は円の単一の面しかレンダリングしないことに注意してください。

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

# thetaLength and thetaStart Properties

度数で言うと、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>

半径方向の分割数（＝辺）を変えることで、プリズム (opens new window)を作ることができるのです。例えば、六角形のプリズムを作るには

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

# dodecahedron　正十二面体

正十二面体の形状は、12個の同じ大きさの面を持つ多角形となる。

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

# octahedron　正八面体

正八面体の形状は、8つの正三角形の面を持つポリゴンを作ります。

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

# plane　平面

平面ジオメトリは、平らな面を作成します。平面は平らなので、マテリアルコンポーネントに side: double を指定しない限り、A-Frame は平面の1つの面だけをレンダリングします。

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

# ring　リング

リングジオメトリは、CD (opens new window)のような平らなリングを作成します。リングは平らなので、マテリアルコンポーネントに side: double を指定しない限り、A-Frame はリングの1つの面しかレンダリングしません。

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

# sphere　球体

球体ジオメトリは、球体（ボールなど）を作成します。基本的な球体を作成することができます。

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

水平角と面の数を指定することで、多面体や抽象的な形状を作ることができます。

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

# tetrahedron　四面体

四面体のジオメトリは、4つの三角形の面を持つポリゴンを作成します。

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

# torus　トーラス

トーラスの形状は、ドーナツ型や曲がったチューブ型になります。

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

# torusKnot　トーラスノット（結び目）

トーラスノット（結び目）は、プレッツェルの形状を作ります。共素数の整数pとqの組はプレッツェルの特定の形状を定義します。もしpとqが共素数でなければ、結果はトーラスリンクになります。

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

# triangle　三角形

三角形のジオメトリは、平らな2次元の三角形を作成します。三角形は平面なので、マテリアルコンポーネントに side: double を指定しない限り、A-Frame は、vertexA 、vertexB 、vertexCが画面上で反時計回りに並んでいる1つの面だけをレンダリングします。

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

# カスタムジオメトリを登録する

独自のジオメトリを登録するには、AFRAME.registerGeometryを使用して、THREE.Geometry (opens new window)のインスタンスであるオブジェクトを作成します。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);
  }
});

コンポーネントの登録と同様に、名前、ジオメトリのプロパティを公開するスキーマ、ライフサイクルメソッドを提供します。次に、ジオメトリを作成し、initライフサイクルメソッドでthis.geometryに設定する必要があります。

ジオメトリコンポーネントがそのプリミティブプロパティをカスタムジオメトリ名に設定すると、ジオメトリコンポーネントにカスタムジオメトリのプロパティを設定することができます。カスタムジオメトリを登録したとします。

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>