WebAR(AR.js)で使用するQRコード とARマーカー作成方法
環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.1)
⭐️Blender v2.79.6
⭐️Mac Book
⭐️ブラウザ safari
https://twitter.com/nonnonkapibara/status/1110160511671263232
🌸WebAR🌸やってみたよぉ🤩
— non (@nonnonkapibara) March 25, 2019
（●＾o＾●）ｖ
WebブラウザでARマーカーを読み込んでみました🏖️
（マーカー式）
くるくるしてるハートは☀️Blender☀️のアニメーション を表示。
❤️ハート❤️をTapすると🎁Qiitaページへ🌈ジャンプ‼️作ってみたよぉ#WebAR #XRMTG #XRMTG pic.twitter.com/WxJlDZckKm
WebAR(AR.js)で使用するQRコード とARマーカー作成する。
1.まず、QRコードを作成する
3.ARマーカーを作成する
AR.js Marker Training
https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
ARマーカー画像と、パターンをダウンロードする。
ARマーカーのサイズを色々試してみました。
基本は、
名刺のサイズ
91mm × 55mm
で、作ってARマーカーのサイズを１０mmから５０mmまで、試してみた。
色々、やって、50mmがちょうどよかったです。
💎WebAR💎
— non (@nonnonkapibara) March 25, 2019
Inkscapeで書いた絵を🎊png🎊出力して表示してみたよぉ。
ARマーカーに近づけたり、遠ざけたりしてみたよぉ🤩#WebAR #XRMTG #XRMTG pic.twitter.com/8GMhhy6Ths
🚩WebAR🚩
— non (@nonnonkapibara) March 25, 2019
Blenderで出力した３Dモデルは🐱pngに比べて表示がちょっと重いみたい🐷#WebAR #ARマーカー #XRMTG #XRMTG pic.twitter.com/Bs76WIWu1X
🎂WebAR🎂
— non (@nonnonkapibara) March 25, 2019
Blenderで作ったアニメーション 「Walk」🍭を出力して表示してみた。#WebAR #ARマーカー #XRMTG #XRMTG pic.twitter.com/cibKbmLw10
