WebARはじめてみませんか？〜第2回 A-frameで3Dオブジェクトを自在に操作する〜

こんにちは！

デザイナーの伊東です。

今日は、WebARについて書こうと思います。
昨年書いたWebARの記事の内容をベースに、今回は3Dオブジェクトの操作方法について詳しく掘り下げていきます。

前回の記事は、下記リンクからご確認ください！
WebARはじめてみませんか？〜第1回 AR.jsで簡単WebAR〜

前回のおさらい

まずは、前回もご紹介した基本の「キューブの表示」の部分をおさらいしましょう。
A-frame、AR.jsを読み込んだ後に、下記のコードで実装します。

今回はこのコードをベースに、キューブを自在に操作していきます。

オブジェクトの操作

オブジェクトに対して色々変更を加えるには、キューブを表示させている<a-box>タグに様々な属性を記述していきます。

移動

基本的にAR.jsで表示させた3Dオブジェクトは、マーカーのある場所に表示されます。
マーカーから、3Dオブジェクトの位置を意図的に変更することも可能です。

その場合、「position」という属性を設定します。

position属性に設定する3つの数字は、それぞれ「X軸」「Y軸」「Z軸」を表します。
それぞれの軸と、マーカーと3Dオブジェクトの関係性は下の図の通りです。

オブジェクトを左右に動かしたければX軸を、手前や奥に動かしたければZ軸、上下に動かしたければY軸を操作すればいいわけです。

拡大・縮小

HTML/CSSと同じように、3Dオブジェクトにも”width”と”height”を設定することができます。
ですが、この2つの属性を編集してもX軸とY軸方向のみ変更されることになります。
Z軸方向にもサイズを変更する場合は、”depth”属性を指定します。

それぞれに設定した数字は、マーカーのサイズを1とした時の比率です。
上記のコードによって、マーカーのサイズの2倍のキューブが表示されます。

回転

“rotation”属性を使用すれば、オブジェクトを回転させることも可能です。

左から、X軸、Y軸、Z軸を基準に何度回転させるかを指定します。
指定した数値分、それぞれの軸からみて時計回りに回転させます。
マイナスの値を指定すれば、反時計回りに回転させることになります。

色の変更

キューブの色を変更させるには、”color”属性を指定します。

“線”の色ではなく、”面”の色が変更される点が注意が必要です。
CSSで考えると”background-color”を指定したくなりますが、
3Dオブジェクトの着色は”color”のみで指定可能です。

線の太さ

キューブを構成する線の太さも指定可能です。
まずは、線を表示させるために、”wireframe”属性を指定します。

こうすることで、”面”で構成されたキューブが、”線”のみで表示されます。
そうした上で、今度は”線”の太さを調整してみましょう。

デフォルトの”wireframe-linewidth”の値は”2″です。
“1”を指定することで細いラインが実現できます。

アニメーション

最後に3Dオブジェクトの”アニメーション”についてみていきましょう。
今までご説明した各種属性をどう変化させるかを、”a-animation”というタグを使って指定していきます。

“a-animation”の各属性を詳しくみていきましょう。

• attribute：変化させる属性を指定します。ここでは”回転数”をアニメーションさせていきます。
• from：変化のスタート地点を指定します。
• to：変化のゴール地点を指定します。”from”から”to”までの間を、自動で補完することでアニメーションさせます。
• direction：アニメーションの方向を指定します。”alternate”は通常方向、”reverse”は逆方向、つまり”to”から”from”までのアニメーションになります。
• dur：アニメーションの速度を指定します。
• repeat：繰り返しの回数を指定します。”indefinite”は制限なしに繰り返します。
• easing：アニメーションの加速度、減速度を指定します。

まとめ

いかがだったでしょうか。
これまでご紹介した属性を使いこなせば、様々なバリエーションの表示方法を可能にします。

今回はA-frameで扱えるオブジェクトのほとんどに指定できる基本的な属性をご紹介しました。
もっと応用的な属性については、A-frameの公式ドキュメントを検索されることをお勧めします。