A-Frame入門：a-cylinder（円柱）とa-sphere（球）

「A-Frame」の<a-cylinder>について紹介します。

サンプル

a-cylinderの基本

<a-cylinder
  color="#060"
  radius=".5" height="3"
  position="0 0 -3"
  rotation="20 20 0"
></a-cylinder>

前回で「a-box」を紹介しましたが、A-Frameの基本形状のプロパティは大体同じものが使えます。

しかし cylinder に関してはwidthを設定できず、代わりにradiusが存在します。
これは「直径」の値になります。大きいほど太い円柱になり、例えばradiusを大きく、heightを低くすれば円盤状にもできます。

a-sphereの基本

  <a-sphere
    color="#cc3"
    radius="1"
    position="1 4 -4"
  ></a-sphere>

サンプル上に浮いている黄色い球です。sphereの場合はheightも無く、直径のradiusのみでサイズが決まります。

オレンジのcylinder

六角形の柱になっていますが、これはsegments-radial="6"の効果です。
円柱のセグメント数のプロパティなので、数値の分だけの角柱になります。

しかし視点を変えて側面を見るとツルッとした面になっているので、ちょっと不自然ではあります。

グレーのcylinder

土管のようになっていますが、これはopen-ended="1"とside="double"の効果です。

open-ended="1"で筒状にすることができますが、これだけだと筒の内側から見た時に透明になってしまうので、両面を可視状態にするためside="double"を設定します。

しかしa-planeと同様に1ピクセルも厚みを持たないので単体で土管に見せるには無理があります。実際は複数のプリミティブを組み合わせて作ることになります。

ピンクのcylinder

もはや柱の形をしていませんがtheta-length="120"の効果です。

柱の360度中の120度だけを切り出して局面のように表示することができるプロパティです。