11
15

More than 5 years have passed since last update.

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

Posted at

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

11
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
15