AR.jsって?
https://github.com/jeromeetienne/AR.js/blob/master/README.md
こちらです。ブラウザだけで AR を実現してしまうすごいやつです。
ARマーカーがHiro
だったり人
だったりするところに日本人としては親しみを覚えます。
良記事がたくさんあるのでAR.js自体の説明は省略して、毎回毎回調べたり考えたりすることを書いておきます。
気が向いたときにアップデートします。
さっそくTips
座標系は?
ARマーカー(Hiroとか人とか)を世界の中心(地面)とした右手座標系です。
ARマーカーを机の上におくならY
が上方向。 ARマーカーをPCモニタや壁やポスターなど垂直にうつすのならY
が手前方向で-Z
が上方向です。
右手座標系では、親指を 軸の+方向 に向けたときに残りの指が向く方向が+の回転方向です。 ARマーカーを壁やポスターなどにした場合には X軸 方向に -90度 の回転をかけることで正しい方向に向かいます。
長さの単位は?大きさは?
ARマーカー の1辺が 1 になります。
なので <a-sphere radius="0.5">
で、半径 0.5 = 直径 1.0 で、ちょうどマーカーと同じサイズの球が表示されます。
この時に、ARマーカーが 10cm x 10cm だったら10cmのボールが表示されることになります。 ARマーカーが 5cm x 5cm だったら5cmのボールが表示されることになります。
e.g.
ARマーカーを 5cm x 5cm で印刷
野球ボール(約直径7cm)を正しいサイズで出したければ、実寸で半径3.5cmなので、AR.js座標系にするため、3.5 / 5 で<a-sphere radius="0.7">
の球体を表示するとよいことになります
マーカーの上にちょうどよく立方体をのせるには?
AR.js
というかa-frame
はデフォルトだとオブジェクトの中心が座標の中心になるので、1 x 1 x 1 の立方体の場合には、中心から 0.5 ずつまわりに広がってることになります。
なので、マーカーの上に立方体をのせるためには、0.5 分だけ上にずらす必要があります。