JavaScript
tips
memo
vr.js
AR.js

AR.js で毎回忘却のかなたにいってしまうTipsメモ

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が上方向です。

01.jpg 02.jpg

右手座標系では、親指を 軸の+方向 に向けたときに残りの指が向く方向が+の回転方向です。 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 分だけ上にずらす必要があります。

04.jpg