記事内容は自分用のメモ。ツール・サービス紹介アプリ不要なAR年賀状の記事を見て、私もwebARしたいなと思いました。昨日の記事でやっている方がいらっしゃいました!これ!iti.hatenablog.jpA-FrameとAR.jsを使うのが良さそうです。A-FrameはVRを作るときに使ったことがあるのでなんとなくわかります。不安な部分はありますがとりあえずやって見ます。サーバーカメラにアクセスするのでhttpsができるサーバーに最終的にアップロードしないといけません。pagesは使えるっぽいです。qiita.comgitchはよくわかりませんでした。あとbitballoonというサーバー?を使っている人もいました。www.bitballoon.comgithubとりあえず以前webvr用に作ったgithubを書き換えます。github.comこちらの方のコードをコピペしました。pageに全然反映されない。https://bibinba.github.io/A-frame/BItBalloon次にbitballoonを使いました。www.bitballoon.comログインはいらなくて、トップ画面にindex.html入りのフォルダをドラックするだけでurlをくれます。神!(ただしあとでオブジェクトの大きさを合わせるのに、何回かアップロードし直す必要があったので、結局サインインしました。githubで簡単にできるので、何回かやり直すならした方がいいです。)これをスマホ(android&chrome)で開きます。そのまま開くとこんな感じでエラーが出てしまうので、urlの前に手打ちでhttps://をつけます。カメラの許可を出すと・・・おおー!表示されました!!!ちなみに事前に画面を横にしておかないと、途中で横にしたらカメラがめっちゃ拡大されて表示しにくくなってしまいます。先の方のコードはデフォルトのhiroマーカーで、ワイヤーのキューブを表示しただけなのでindex.htmlだけで事足りましたが、オリジナルのオブジェクトを表示したり、オリジナルマーカー画像を使うこともできるようです。オリジナルモデルobj,mtl,テクスチャの一式を用意しておきます。さっきのindex.htmlにモデルの読み込み部分の追記と、表示部分の書き換えを行います。さっきの方の記事の後半に書いてあったものをまたコピペさせていただきました。objとmtlのファイルの名前はちゃんと書き換えます。0"dur="3000"easing="linear"repeat="indefinite"></a-animation></a-obj-model></a-marker>そして全てを同じ階層に置き、bitballoonにアップロードします。さっきと同じように実行すると・・・おお!できました!まあこの大きさにたどり着くまでに2回ぐらい修正しましたけど。テキストも表示できます。自分で作ったマーカーをこのサイトにアップロードして、ダウンロードして、それを使えばいいそうです。Trainingこちらの方のコードを参考にiti.hatenablog.jpタグはこんな感じに書き換える。url="marker/marker.patt">でもurlの書き方があっているかよくわからない。今は不具合が出ているから、AR.jsを書き換えないといけないらしいけどちょっとよくわからなかったので保留。github.com最後に先人の記事とbitballoonのおかげで簡単にできました!怖くなかった!TangoやARtoolkitを使った(多分)マーカー無しのwebarもありますが、個人的には年賀状やメッセージカード、配布チラシとかで行うならマーカーはあった方がやりやすい気がします。まあ最初だけマーカーの、Artoolkitとかが一番いいのかもしれません。Webマーカー無しのWebARができる。去年はAr.jsとBItBallo...2017-12-19Tokyo!で最先端に触れる2日目【ARハッカソン,池袋VR&松巡り】2日目と3日目の記事です。週間)VR/AR/Unity好きです。記事内容は自分用のメモです。読みにくいと思います。Programに参加しています。無料です!はじめてのAndroidアプリはてなブログをはじめよう!bibinbaleoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。