ARコンテンツを埋め込んでみました

  1. エンジニアブログ

こんにちは、開発本部の0009です。
今回はARコンテンツを埋め込んでみました。


↓ 左側のボタン[AR] を押してみてください
↓ FireFox(Win,Mac(iOSは除く))では, カメラの共有を求められると思います
↓ ご許可いただきますと, 枠内にマーカー型ARコンテンツが埋め込まれます!

↑右側のボタン[VR] を押しますと, 枠内に前回記事のVRコンテンツが埋め込まれます


ARマーカーは、弊社ロゴです。
例えば、東京本社エントランスに掲げられておりますものにカメラを向けますと、
本記事のアイキャッチ画像のように見えます。
お立ち寄りの際は、是非このARコンテンツを試してみてください!


さて、このコンテンツの実態は 「A-Frame + AR.js」 です。
今年のお正月に話題に上がりました、AR年賀状で用いられているフレームワークです。

前回のVRコンテンツと同様に、XVLファイルから書き出されています。

A-Frame + AR.js は、「10行でARコンテンツが作れるよ!」という手軽さが売りです。
ならば、と埋め込みに挑戦したのです。
しかし、いざ触ってみますと頭を抱えることが多々ありました。
・OS と ブラウザ の組み合わせを選ぶ
・3D モデルに合わせた加工が必要
ですので、対象の3D モデルのサイズに合わせる処理を書きました。


さらに、カメラの共有の許可を求めるタイミングを、ユーザが制御できるようにしました。
[AR][VR]のボタンは、これを実現するための工夫です。
何もしない場合、記事が全く表示されるよりも先に共有の許可を求める環境もあります。
それではユーザに不信感を与えてしまいます。ですので、このような形をとりました。


これらのお膳立てを、丸ごとWordPressプラグインにまとめました。
この結果、この記事へのARコンテンツの埋め込みは、1行です!


<参考にした記事>
AR.js
Creating Augmented Reality with AR.js and A-Frame
A-FrameとAR.jsで超簡単AR(PC・スマホ・マルチマーカー対応)
🐶AR.jsを使ってWebAR年賀状を作る🐶

ラティス・テクノロジー株式会社のエンジニアです。2016年度新卒入社。
主にTP製品 (Excel帳票出力など) の開発担当をしています。
音のディジタル信号処理で博士(工学)を取得しました。
博士課程にて大量かつ正確にデータ処理する面白さに目覚め、
音信号の1次元の世界から3次元の世界に飛び込んできました。
近年は、子育てとのワークライフバランスのSDGsに邁進しています。

記事一覧

関連記事

しゃべるパワポの作り方

こんにちは、開発本部の0009です。今回は“しゃべるパワポ”の作り方を紹介します。皆さん、発表は得意ですか?私は苦手です。緊張で、声が出なくなるほどです。…