A-FRAME: プリミティブ一覧

A-FRAMEを触り始めました。
3D空間が簡単に作れて楽しいです。

とりあえず形状を作成してクルクル回して楽しんでるだけなのですが、どんな形状があるのか[公式ドキュメント](https://aframe.io/docs/0.9.0/introduction/)をチラ見すると、ちょっと疑問を持ちました。

<font color="red">**dodecahedron**</font>

なんだこれ？？

`circle` とか `box` はわかるのですが、
`dodecahedron` これはパッとわかりません。

まず、A-FRAMEにおけるプリミティブを理解する為、
名称と概要の和訳の一覧を作成してみました。

## 直線平面

|プリミティブ名|画像|概要の翻訳|
|:--|:--|:--|
|[a-triangle](https://aframe.io/docs/0.9.0/primitives/a-triangle.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/b9ce3d3c-383d-1e21-3464-54e47263899a.png width=150 />|プリミティブ三角形は、三角形に設定タイプのジオメトリコンポーネントを使用して、三角形の面を作成します。<br>|
|[a-plane](https://aframe.io/docs/0.9.0/primitives/a-plane.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/1264dedc-87a2-4c36-aa90-8a177f69b536.png width=150 />|プリミティブ面は平面に設定タイプのジオメトリコンポーネントを使用して平坦な表面を作成します。<br>|
|[a-text](https://aframe.io/docs/0.9.0/primitives/a-text.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/bd34a692-4acb-f923-b6aa-48e482602e94.png width=150 />|テキストコンポーネントをラップします。<br>|
|[a-image](https://aframe.io/docs/0.9.0/primitives/a-image.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/8e8c4c3f-2d10-8a30-8236-7abf9d6ca92a.png width=150 />|原始画像が平面上の像を示しています。<br>|
|[a-video](https://aframe.io/docs/0.9.0/primitives/a-video.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/0987272a-04e9-c989-f73d-497be47dec2c.png width=150 />|ビデオプリミティブは、平面上のテクスチャとしてビデオを再生します。<br>|

## 直線多面体

|プリミティブ名|画像|概要の翻訳|
|:--|:--|:--|
|[a-tetrahedron](https://aframe.io/docs/0.9.0/primitives/a-tetrahedron.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/24f7eec4-5f02-2337-8aff-3e0a9a129412.png width=150 />|四面体|
|[a-box](https://aframe.io/docs/0.9.0/primitives/a-box.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/eb89f620-77c1-01a0-e7bf-e4dbc3047b9b.png width=150 />|プリミティブボックスは、箱、立方体、又は壁のような形状を作成します。<br>|
|[a-octahedron](https://aframe.io/docs/0.9.0/primitives/a-octahedron.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/94717bfd-d33d-7997-5028-ad71a93389bc.png width=150 />|八面体|
|[a-dodecahedron](https://aframe.io/docs/0.9.0/primitives/a-dodecahedron.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/1ab79257-b7ad-adff-4b6c-199adae6f82c.png width=150 />|十二面体|
|[a-icosahedron](https://aframe.io/docs/0.9.0/primitives/a-icosahedron.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/a372d939-7c52-717d-c36d-26eca15dcfb0.png width=150 />|二十面体|

## 曲線平面

|プリミティブ名|画像|概要の翻訳|
|:--|:--|:--|
|[a-circle](https://aframe.io/docs/0.9.0/primitives/a-circle.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/800ac2f4-b656-096c-d0b3-36702ac1016f.png width=150 />|プリミティブ円は、円を作成する円に設定タイプのジオメトリコンポーネントを使用して表面。<br>|
|[a-ring](https://aframe.io/docs/0.9.0/primitives/a-ring.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/3a8110e0-d3d8-8b46-abcd-ff1c618e01f4.png width=150 />|プリミティブリングは、リング又はディスク形状を作成します。<br>|
|[a-link](https://aframe.io/docs/0.9.0/primitives/a-link.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/d6af9f7d-113c-f948-ed1b-477471ecc9c1.png width=150 />|プリミティブリンクが似ているリンクを定義するためのコンパクトなAPIを提供します<br>伝統的なタグ。<br>|

## 曲面多面体

|プリミティブ名|画像|概要の翻訳|
|:--|:--|:--|
|[a-cone](https://aframe.io/docs/0.9.0/primitives/a-cone.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/39ef7567-bcad-4dfb-7f27-8f7010646462.png width=150 />|プリミティブコーンは、円錐形状を作成します。<br>|
|[a-cylinder](https://aframe.io/docs/0.9.0/primitives/a-cylinder.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/d796de5d-c217-7189-157f-cb1284a1bc91.png width=150 />|プリミティブシリンダは管と曲面を作成するために使用されます。<br>|
|[a-sphere](https://aframe.io/docs/0.9.0/primitives/a-sphere.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/cff1217e-2e5d-b743-8b92-956b0d97f47b.png width=150 />|プリミティブ球体は、球形または多面体形状を作成します。<br>これは、ラップ<br>球にその幾何学的プリミティブのセットとジオメトリコンポーネントを規定するエンティティ。<br>|
|[a-videosphere](https://aframe.io/docs/0.9.0/primitives/a-videosphere.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/975bc73d-bb73-168a-d56d-0a6569a8127e.png width=150 />|プリミティブvideosphereは、シーンの背景に360°のビデオを果たしています。<br><br>Videospheresは、内部にマッピングされた映像の質感を持つ大規模な球です。<br>|
|[a-sky](https://aframe.io/docs/0.9.0/primitives/a-sky.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/805b3aef-baef-475c-968c-9f4431c55596.png width=150 />|空プリミティブは、シーンに背景色や360度の画像を追加します。<br>スカイ<br>内部にマッピングされた色や質感のある大きな球です。<br>|
|[a-curvedimage](https://aframe.io/docs/0.9.0/primitives/a-curvedimage.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/644f6850-40c0-4858-9a6f-58d83d1798cf.png width=150 />|プリミティブ湾曲した画像は、ユーザの周囲にその曲げ画像を作成します。<br>曲がりました<br>カメラの周囲に配置された画像は各ので視認性のために喜ばせることができます<br>ピクセルは、ユーザから同じ距離に位置します。<br>彼らは、より良い選択することができ<br>複雑なレイアウトのための角度のついたフラットな面よりも、彼らがスムーズに確保するため、<br>表面ではなく平面間の厄介な継ぎ目の一連。<br>|
|[a-torus](https://aframe.io/docs/0.9.0/primitives/a-torus.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/7af20181-de29-3fce-e89c-8e7c8ce9b460.png width=150 />|プリミティブトーラストーラスに設定タイプのジオメトリコンポーネントを使用して、ドーナツまたはチューブ形状を作成します。<br>|
|[a-torus-knot](https://aframe.io/docs/0.9.0/primitives/a-torus-knot.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/935b76de-1f64-7287-cb25-baac6c1737fa.png width=150 />|トーラス結び目プリミティブはtorusKnotに設定タイプのジオメトリコンポーネントを使用して、プレッツェル形状を作成します。<br>|

## インポート

|プリミティブ名|画像|概要の翻訳|
|:--|:--|:--|
|[a-gltf-model](https://aframe.io/docs/0.9.0/primitives/a-gltf-model.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/70df44d3-5158-48db-a29f-d228274f891c.png width=150 />|3D glTFモデルが3Dで作成したglTFモデルプリミティブを表示<br>モデリングプログラムまたはWebからダウンロードしました。<br>|
|[a-obj-model](https://aframe.io/docs/0.9.0/primitives/a-obj-model.html)|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/0e048506-f256-ccc5-0add-f33674f58118.png width=150 />|.OBJモデルプリミティブは、3D波面モデルを表示します。<br>|

## シーンの設定などの形状以外

|プリミティブ名|画像|概要の翻訳|
|:--|:--|:--|
|[a-camera](https://aframe.io/docs/0.9.0/primitives/a-camera.html)| |原始的なカメラは、ユーザーが見ているものを決定します。<br>我々変更することができます<br>カメラエンティティの位置と回転を変更することで、ビューポート。<br>|
|[a-cursor](https://aframe.io/docs/0.9.0/primitives/a-cursor.html)| |原始的なカーソルはクリックして基本を可能にしたレチクルであります<br>ハンドコントローラを持っていないデバイス上のシーンとの対話。<br><br>デフォルトの外観は、リング形状です。<br>カーソルが通常のように配置されています<br>カメラの子。<br>|
|[a-light](https://aframe.io/docs/0.9.0/primitives/a-light.html)| |光は、シーンのライティングやシェーディングを変更します。<br>|
|[a-sound](https://aframe.io/docs/0.9.0/primitives/a-sound.html)| |原始的な音は、音成分をラップします。<br>|

## まとめ

各プリミティブを一通りレンダリングしてみました。
うまく動いていないところや良くわからない部分もたくさんあるので、もう少し詳しく各形状を見ていきたいと思います。

`a-video-sphere` ところどころ欠けてしまう
`a-obj-model` テクスチャが表示されていない
`a-link` カーソルを合わせなくても勝手に画面遷移する
`a-torus-knot` 何に使えばいいのかな、う○こかな

ほとんどわからないながらも、 `a-gltf-model` のようにどこかからパクってきたモデルが、簡単にブラウザ上でレンダリングできるのはすごく楽しいです。

## 参考

[Sketchfab - Cathedral](https://sketchfab.com/3d-models/cathedral-faed84a829114e378be255414a7826ca)