はじめてのA-Frame

A-FrameとはVRが作成できるWebフレームワークです。
説明より実際にコードを書いて動かす方が理解しやすいです。
下記のコードをhtmlファイルに貼り付けてみましょう。

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

VisualStudioCodeならopenコマンドで一発です。

open a_frame.html

ブラウザ上で表示された三つのオブジェクトを見た時、私は__おでんを作りたい__と思いました。

この写真を参考に作ります

おでん串の食品サンプル

こんにゃく

三角形のオブジェクトを作ります。


<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cone position="-1 0.5 -3" rotation="0 45 0" color="#C1953C"></a-box>
  </body>
</html>

出汁を吸って美味しそうな色はしていますが、思ったような三角形になりません。 # 大根

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sphere position="-1 1.25 -5" radius="1.25" color="#F9CA7D"></a-sphere>
    </a-scene>
  </body>
</html>

これは、出汁を吸って美味しそうです。 # ちくわ

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cylinder position="-1, 1.5, -3" radius="0.5" width="3" height="1.5" color="#EDC187"></a-cylinder>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

これも、出汁を吸って美味しそうです。ですが横長にする方法がわからない・・・

現時点でおでんはできたか？

ジャジャーン

三つのオブジェクトが無重力状態にさらされています。

そうか！串を作るのを忘れていた！

残念ながら今回は時間切れのため、一年後に再挑戦したいと思います


<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cone position="-1 0.5 -3" rotation="0 45 0" color="#C1953C"></a-box>
      <a-sphere position="-1 1.25 -5" radius="1.25" color="#F9CA7D"></a-sphere>
      <a-cylinder position="-1, 1.5, -3" radius="0.5" height="1.5" color="#EDC187"></a-cylinder>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

別に完璧じゃなくてもいいんだよ

同期の若手の子が、アウトプットが苦痛になってきたというつぶやきを見て僕もそれは割と変わらない心境でした。
なので今回みたいな少しおふざけ要素を含み、かつ新しい技術を使い、
結局おでんは描画できなかった、という全然完璧じゃないプロセスを公開したとしても、一年後にもう一度同じ技術を触る機会があって、あのときはA-Frameのpositionが理解できなくておでんの具材を縦に並べることすらできなかったことを思い出す場面があっても良いと思いました。
たまには息抜き的なアウトプットも必要だと思いました。