• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

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

2019年2月2日

  • このエントリーをはてなブックマークに追加

こんにちは!
デザイナーの伊東(@ALAKIWebVRAR1)です。

※TwitterでもWebARの事を中心に情報発信中!
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1

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

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

この記事の目次

  • 1 前回のおさらい
  • 2 オブジェクトの操作
  • 3 まとめ

前回のおさらい

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a-scene embedded arjs="debugUIEnabled:false;">
 
  <!-- マーカーを登録(デフォルトで設定されている「hiro」マーカー) -->
  <a-marker preset="hiro">
    <!-- マーカーの場所に立方体を置く -->
    <a-box></a-box>
  </a-marker>
 
  <a-entity camera
  cursor-visible="true"
  cursor-scale="2"
  cursor-color="#ff0000"
  cursor-opacity="0.5"></a-entity>
 
</a-scene>

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

オブジェクトの操作

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

移動

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

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

1
<a-box position="0 2 0"></a-box>

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

IMG_3199

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

拡大・縮小

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

1
<a-box width="2" height="2" depth="2"></a-box>

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

回転

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

1
<a-box rotation="45 90 180"></a-entity>

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

色の変更

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

1
<a-box color="#ff0000"></a-box>

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

線の太さ

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

1
<a-box wireframe="true"></a-box>

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

1
<a-box wireframe="true" wireframe-linewidth="1"></a-box>

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

アニメーション

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

1
2
3
4
5
6
7
8
9
10
11
<a-cube rotation="20 0 0">
  <a-animation
    attribute="rotation"
    from="20 0 0"
    to="20 180 0"
    direction="alternate"
    dur="4000"
    repeat="indefinite"
    easing="ease">
  </a-animation>
</a-cube>

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

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

まとめ

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

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

  • ツイート
  • このエントリーをはてなブックマークに追加
ALAKI ロゴ
さよなら過去のAR。
WebARがイベント集客に
革命を起こします。
特設サイトはこちら >

You may also like...

  • mockup-01-2

    来店型ビジネス、イベント集客を加速させるWebARの魅力

    8 6月, 2019

  • スクリーンショット 2018-08-31 0.12.52

    8thWallが8thWallWebを発表!WebブラウザからでもマーカーレスARが体験可能に

    14 9月, 2018

  • スクリーンショット 2018-11-29 23.56.53

    blender2.8を使って3Dオブジェクトにアニメーションをつける方法〜part.1〜

    30 11月, 2018

  • Next story Numpyを活用して画像の変化量を数値化してみよう!
  • Previous story PythonのOpenCVライブラリを活用して背景差分を取得してみよう!

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.