Edited at

aframeの<a-box>的なの全部書かなきゃ帰れま10

20181021184011.png

この記事はaframeにて、デフォルトで使えるオブジェクトタグ(<a-box>など)のまとめです!

(内容は帰れない的なやつではなく至って真面目です!)


オブジェクト一覧

webXRを簡単に実現するライブラリaframeには

一般的な直方体(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>

トーラスは円周を回転して得られる回転面だそうです。(引用:wiki)

ドーナツっぽいのでドーナツの色にしてみました。

参考: 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の公式ドキュメントにあるオブジェクトタグを画像と一緒にまとめてみました。

(このqiitaは著者が自分のブログで2018年10月に公開した記事を移行したものです。)

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

ちなみに共通して、こんな風にオブジェクトにテクスチャを貼ることもできます。


<a-assets>
<!-- テクスチャにする画像はa-assetsのなかで指定する -->
<img id="texture" src="texture.png">
</a-assets>

<a-box src="#texture"></a-box>

テクスチャを貼るとまた表現方法が広がって楽しいはず!