More than 3 years have passed since last update.

A-Frameのprimitive object全部書かなきゃ帰れま10

Last updated at 2021-08-13Posted at 2019-08-15

この記事は、A-Frameでデフォルトで使えるprimitive objectタグ（<a-box>など）を画像と共にまとめたものです。
※この記事は2018年10月時点（A-Frame v0.8）の内容です。

オブジェクト一覧

WebXRを簡単に実現するライブラリ「A-Frame」は、あらゆる3Dオブジェクトを簡単なhtmlタグで扱うことができます。
この記事ではどんな形がどんなタグで使用できるのかを画像付きでご紹介します。
※長いので忙しい方は目次から飛ぶのをお勧めします

box

<a-box></a-box>

基本的な立方体。
depth="" height="" width=""をそれぞれ指定すると縦横奥行きまで変更できます。
ちなみに画像ではcolor="tomato"にしてみました。
docs: https://aframe.io/docs/0.8.0/primitives/a-box.html

sphere

<a-sphere></a-sphere>

radius=""で半径の指定ができます。
docs: https://aframe.io/docs/0.8.0/primitives/a-sphere.html

cone

<a-cone></a-cone>

円錐
radius-bottom=""で底面の円の半径
radius-top=""で上の円の半径が変更できます。

「上の円の半径」いじるとこんな感じ

<a-cone color="skyblue" radius-bottom="2" radius-top="0.5"></a-cone>

docs: https://aframe.io/docs/0.8.0/primitives/a-cone.html

cylinder

<a-cylinder></a-cylinder>

円柱
height=""で高さ
radius=""で円の半径が指定できます。

円柱/cylinderは応用例がたくさんあります。

ヘキサゴン

<a-cylinder segments-radial="8"></a-cylinder>

segments-rasial（辺の数）は変えられますので3にすれば三角柱に、というように変形が可能です。

パックマン

<a-cylinder color="yellow" theta-start="50" theta-length="280" side="double"></a-cylinder>

円柱に切り込みを入れてパックマン

パイプ

<a-cylinder color="green" open-ended="true"></a-cylinder>

open-ended="true"にすることで円の面を消して空洞のようにできます
（デフォルトが片面描画ですが、両面描画に設定すれば内側の面も描画されてよりパイプっぽくなりそう）

docs: https://aframe.io/docs/0.8.0/primitives/a-cylinder.html

tetrahedron

<a-tetrahedron></a-tetrahedron>

三角錐
radius=""で半径の指定ができます。
docs: https://aframe.io/docs/0.8.0/primitives/a-tetrahedron.html

dodecahedron

<a-dodecahedron></a-dodecahedron>

正十二面体
こちらも上と同様、radius=""でサイズの指定ができます。
docs: https://aframe.io/docs/0.8.0/primitives/a-dodecahedron.html

icosahedron

<a-icosahedron></a-icosahedron>

正二十面体
radius=""でサイズの指定ができます。
docs: https://aframe.io/docs/0.8.0/primitives/a-icosahedron.html

octahedron

<a-octahedron></a-octahedron>

八面体
radius=""でサイズの指定ができます。
余談ですが、color="grey"にすると仮想通貨みが出ます。
docs: https://aframe.io/docs/0.8.0/primitives/a-octahedron.html:title

plane

<a-plane></a-plane>

planeは立体ではなく平面で、地面などの表現に用いられます。
初期値では裏側は描画されません。

height=""で高さ（縦幅）
width=""で幅（横幅）が指定できます。
docs: https://aframe.io/docs/0.8.0/primitives/a-plane.html

circle

<a-circle></a-circle>

planeと同様、平面の円です。同じように初期値では裏側は描画されません。
radius=""で半径の指定ができます。
docs: https://aframe.io/docs/0.8.0/primitives/a-circle.html

ring

<a-ring></a-ring>

ringもplaneと同様、平面オブジェクトで初期値では裏側は描画されません。
radius-inner=""で内側の円の半径
radius-outer=""で外側の円の半径の指定ができます。
docs: https://aframe.io/docs/0.8.0/primitives/a-ring.html