【blender2.81】AR.js(A-Frame)で簡単にARを実する方法のイメージ画像

blender2.8 HTML/CSS/JS

【blender2.8】AR.js(A-Frame)で簡単にARを実する方法

今回はAR.jsを使用して以下のような仕様のARをさっと作る方法をメモしておきます。

  1. スマホでQRを読み込んでサイトを立ち上げる
  2. ブラウザにカメラの使用を許可
  3. マーカーから3Dのモデルが出現!

マーカーさえあれば誰でもスマホで見ることができるので、製品案内のパンフレットや年賀状などの印刷物にも使えそうですね。

01.マーカーを準備する

まずはカメラに認識させるためのマーカーを用意します。

QRコードを生成

QRコード作成サイトで、実装するURLを入力して、QRコードをダウンロードします。(QRコード作成サイトはいっぱいあるのでどこでもOKです。)

【blender2.81】AR.js(A-Frame)で簡単にARを実する方法の画像1

【blender2.81】AR.js(A-Frame)で簡単にARを実する方法の画像2

 

マーカーを生成

次にAR.js Marker Trainingにアクセスします。

【blender2.81】AR.js(A-Frame)で簡単にARを実する方法の画像3

ダウンロードしたQRコードをアップロード。

【blender2.81】AR.js(A-Frame)で簡単にARを実する方法の画像4

生成されたマーカーと画像をダウンロードします。これでマーカーの準備は完了です。

 

02.3Dのモデルを準備する

次に3Dのモデルを準備します。以下ご参照ください。

blender2.8で作成したモデルの書き出し方法は【blender2.81】AR用にglTFで書き出す(エクスポートする)方法をご覧ください。

Illustratorで作成したデータを3Dにしたい方は【blender2.81】aiデータを取り込んで立体にする方法をご覧ください。

とりあえず最後まで実装したい方はサンプルデータ(bakuのロゴ)をアップしたのでご使用ください。

 

03.htmlを記述する

次にhtmlを記述していきます。タイトルにある通り、AR.js(A-Frame)を使用しますが、簡単にARを実装できて今のところ対応環境が一番広いフレームワークといったところで詳しい説明は割愛します。

おねえさん
え、htmlだけで良いの?
A-Frame最高やな
baku

ディレクトリ

今回最低限のディレクトリは下記のようになります。※gltfはテクスチャがある場合はテクスチャも含まれます。※gltfを単一ファイルで書き出した場合ファイルは1つです。

  • /index.html
  • /gltf/model.bin(ファイル名は任意)
  • /gltf/model.gltf(ファイル名は任意)
  • /marker.patt(ファイル名は任意)

htmlの記述

これで[.gltf]と[.patt]までのパスを書き換えると、とりあえずカメラでマーカーを読み込んで3Dのモデル(回ってる)を出現させられるはずです。次からは細かい設定についての説明です。

04.コードの説明・微調整

コードについての説明です。必要に応じて調整します。基本的にはライトの追加/削除や、オブジェクト・アニメーションの大きさ/位置/回転の変更、アニメーションの時間の変更になるかなと思います。

  • 大きさ:scale
  • 位置:position
  • 回転:rotation

※それぞれ"x y z"の順番で設定できます。

この中にオブフェクトを入れていきます。

  • embedded:AR.jsを有効にする
  • arjs="debugUIEnabled: false;":ブラウザ上の邪魔な表示を非表示にします
  • renderer="gammaOutput: true;":glTFを使う場合ガンマ補正をかける
  • vr-mode-ui="enabled:false":A-FrameのVRボタンを非表示

アセットとして3Dモデルを読み込みます。

ライトの設定です。

  • type:ライトの種類
  • color:ライトの色
  • intensity:ライトの強度

読み込むマーカーを設定します。この中に入れたタグがマーカーを読み込んだ時に表示されます。

アセットとして読み込んだ3Dモデルをidで呼び出しています。

アニメーションの設定です。

  • attribute:アニメーションの種類
  • to:適用する範囲
  • dur:適用する時間(ms)
  • repeat:繰り返しの設定
  • easing:イージング

05.完成

調整が終わったら完成です。

その他のタグのメモ

今回は必要最低限の説明でしたが、勉強する中でその他にいろいろコードがあったのでメモしておきます。(他にもいっぱいあると思いますが...)

<球体のオブジェクト>

<立方体のオブジェクト>

<平面のオブジェクト>

<.objデータの読み込み>

<背景>

 

「blender」に関するその他の記事

【blender2.8】ダイヤモンドを生成してキレイに書き出す方法のイメージ画像

blender2.8

2020/2/27

【blender2.8】ダイヤモンドを生成してキレイに書き出す方法

blender2.8でメモしておきたい操作を記事にして残しています。今回は、ダイヤモンドを生成してキレイに書き出す方法です。 上の動画は指輪もモデリングしていますが、この記事ではダイヤモンドのみを書き出すところまでをご紹介しています。完成画像はこんな感じ。   ダイヤモンドを生成するダイヤモンドにマテリアルをつける周辺環境を作るキレイに書き出す「blender」に関するその他の記事 ダイヤモンドを生成する まずはダイヤモンドのメッシュを生成します。 blenderを立ち上げて、最初に表示されてい ...

ReadMore

【blender2.8】テクスチャ、ノーマルマップを設定する最も便利な方法のイメージ画像

blender2.8

2020/2/21

【blender2.8】テクスチャ、ノーマルマップを設定する最も便利な方法

blender2.8でメモしておきたい操作を記事にして残しています。今回は、テクスチャ、ノーマルマップを設定する最も便利な方法です。ほんとに便利だったのでこれから何回も使いそう。 ※直接内容は関係ないですが、この記事は【blender2.8】360°背景画像を表示させる方法(HDRI)の続きです。 テクスチャをダウンロードするアドオンを確認するテクスチャを設定する関連する記事「blender」に関するその他の記事 テクスチャをダウンロードする テクスチャをダウンロードできるサイトはたくさんありますが、今回 ...

ReadMore

【blender2.8】360°背景画像を表示させる方法(HDRI)のイメージ画像

blender2.8

2020/2/21

【blender2.8】360°背景画像を表示させる方法(HDRI)

blender2.8でメモしておきたい操作を記事にして残しています。今回は、背景に360°画像を表示させる方法(HDRI)です。 HDRIをダウンロードするアドオンを確認するHDRIを設定する「blender」に関するその他の記事 HDRIをダウンロードする HDRIはHDRIHAVENというサイトで無料でダウンロードすることができます。 車メーカーのサイトみたいやなbaku 今回はSunflowersというのを選びました。 データは1K~16Kまで5種類の大きさから選ぶことができるので、PCのスペックと ...

ReadMore

【blender2.8】MMDのデータ(pmd,pmx,vmd,vpd)を読み込む方法 for Macのイメージ画像

blender2.8

2020/2/20

【blender2.8】MMDのデータ(pmd,pmx,vmd,vpd)を読み込む方法 for Mac

blender2.8でメモしておきたい操作を記事にして残しています。今回は、MMDのデータ(pmd,pmx,vmd,vpd)を読み込む方法です。 アドオンの追加MMDのデータをインポートする最後に「blender」に関するその他の記事 アドオンの追加 MMDのデータを読み込むにはアドオンを追加させなければいけません。 アドオンがダウンロードできるページにアクセスして、[Clone or download]>[Download ZIP]を選択してダウンロードします。 ダウンロードしたファイルを解凍したら、そ ...

ReadMore

【blender2.8】objで書き出してAdobeDimensionに読み込む方法のイメージ画像

blender2.8

2020/2/18

【blender2.8】objで書き出してAdobeDimensionに読み込む方法

blender2.8でメモしておきたい操作を記事にして残しています。今回は、objで書き出してAdobeDimensionに読み込む方法です。 特に難しい操作はないですが、blenderでつくったモデルをAdobeDimensionに読み込んで遊ぶと割と楽しかったので一応記事にしておきます。 blenderでobjを書き出すAdobe Dimensionでobjを読み込む「blender」に関するその他の記事 blenderでobjを書き出す [ファイル]>[エクスポート]>[Wavefront(.obj ...

ReadMore

「blender」の記事一覧はこちら

  • この記事を書いた人

Ryo Endo

bakuDESIGN+代表。 フリーランスのデザイナー・映像クリエイターとして大阪を中心に活動。

-blender2.8, HTML/CSS/JS
-, ,

Copyright© bakuBLOG+ , 2020 All Rights Reserved Powered by AFFINGER5.