Help us understand the problem. What is going on with this article?

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

20181021184011.png
この記事はaframeにて、デフォルトで使えるprimitive object(<a-box>など)のまとめです。

オブジェクト一覧

webXRを簡単に実現するライブラリA-Frameには
一般的な直方体(box)から、ちょっと特殊な形状までを簡単なhtmlタグで扱うことができます。
この記事ではどんな形がデフォルトのタグで使用できるのかを画像付きでご紹介します。
※長いので忙しい方は目次からピックアップしてください

box

20181021170344.png

<a-box></a-box>

基本的な立方体。
depth="" height="" width=""をそれぞれ指定すると縦横奥行きまで変更できます。
ちなみにaframeの公式ドキュメントの例でcolor="tomato"になっていたので
↑の画像もtomatoカラー
参考: https://aframe.io/docs/0.8.0/primitives/a-box.html

sphere

20181021180650.png
<a-sphere></a-sphere>

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

cone

20181021171624.png
<a-cone></a-cone>

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

「上の円の半径」いじるとこんな感じ
20181021173422.png
<a-cone color="skyblue" radius-bottom="2" radius-top="0.5"></a-cone>

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

cylinder

20181021173730.png
<a-cylinder></a-cylinder>

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

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

ヘキサゴン

20181021174023.png
<a-cylinder segments-radial="8"></a-cylinder>

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

パックマン

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

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

パイプ

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

open-ended="true"にすることで円の面を消して空洞のようにできます
参考: https://aframe.io/docs/0.8.0/primitives/a-cylinder.html

tetrahedron

20181021181108.png
<a-tetrahedron></a-tetrahedron>

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

dodecahedron

20181021175115.png
<a-dodecahedron></a-dodecahedron>

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

icosahedron

20181021175430.png
<a-icosahedron></a-icosahedron>

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

octahedron

20181021175636.png
<a-octahedron></a-octahedron>

八面体
radius=""でサイズの指定ができます。
余談ですが、color="grey"にするとブロックチェーンみが出ます。
参考: https://aframe.io/docs/0.8.0/primitives/a-octahedron.html:title

plane

20181021175829.png
<a-plane></a-plane>

planeは立体ではなく平面で、地面などの表現に用いられます。
裏側は描画されませんので地面など裏側に回る必要のないものとして利用すべし
height=""で高さ(縦幅)
width=""で幅(横幅)が指定できます。
参考: https://aframe.io/docs/0.8.0/primitives/a-plane.html

circle

20181021171320.png
<a-circle></a-circle>

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

ring

20181021180352.png
<a-ring></a-ring>

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

triangle

20181021182411.png
<a-triangle></a-triangle>

planeと同様、平面オブジェクトで裏側は描画されません。
vertex-c="0 0 0"をそれぞれ指定すると比率が変えられるぽいです。
参考: https://aframe.io/docs/0.8.0/primitives/a-triangle.html

torus

20181021182050.png
<a-torus></a-torus>

トーラス
ドーナツの色にしてみました。
参考: https://aframe.io/docs/0.8.0/primitives/a-torus.html

torus-knot

20181021181444.png
<a-torus-knot></a-torus-knot>

トーラスノットです。
パラメーター次第でいろんな形ができるようですね。

20181021181659.png
<a-torus-knot color="purple" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>`
(いつ使うかはわかりません。)
参考: https://aframe.io/docs/0.8.0/primitives/a-torus-knot.html

まとめ

今回は2018年10月時点で、aframeの公式ドキュメントにあるオブジェクトタグを画像と一緒にまとめてみました。

この一覧を参考にして、aframeでサクwebXRしてみてください!

Damien
AR/VRが特にすきです
eishis-inc
代々木にあるWebアプリケーション、モバイルアプリケーションを開発する会社
https://palan.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away