※今夜中に動くものを作ってみたかったので調査などとてもできていませんごめんなさい
やってる内容はこちら。
https://www.cview.co.jp/osakatech/2020.01.08.P8ep9q3c
全体の流れはこんな感じ（22:00開始。ワロリンヌ。）
- herokuにデプロイできる環境を用意する
- objとARjs用の画像を用意する
- AR.js AFrame 使ってindex.html作成する
- QRCodeにする
- 試してみる
1. herokuにデプロイできるように
まずはherokuコマンドを打てるように。。
サイトでアカウントを作成して、
$ brew install heroku
$ brew tap heroku/brew
$ brew install heroku
怒られたのでこちらを参考にtapしてinstall。これでherokuコマンドが打てるように。
エラー解決 herokuの導入
今回はhtmlだけ出せれば良さそうだったんだけども、herokuでどうやるのかわからなかったから（←）phpにしてhtmlを読み込んでいるらしいのがあったのでそれを使いました。
$ heroku login
$ mkdir arjs
$ cd arjs
$ ... 主に参考サイトのまま
$ heroku buildpacks:set heroku/php // もしかしたらいらんかも。
$ echo "{}" > composer.json // 上だけでサイト見に行ったらうまく行っていなくて、Warningに出ていたcomposer.json付け足したら見ることができた！！！
最初htmlだけでいけるのかと思ってうまくいかなくてですね。。主にbuildpack周り。
（ No default language could be detected for this app. とか出てしまって。。）
よくみたら参考記事様がphpから読み込んでいたのでそのように変更してみたらうまくできました。
こちらを参考にherokuへのデプロイを可能に。
Herokuを使って簡単にウェブページをインターネットで公開する方法
herokuで悩んだところ
とりあえず動いたぞいというところでサイト見に行ってみたらダメそうな顔..(method not allowed みたいなのでてた)
よくみたらWarningあったのでひとまずcomposer.jsonとやらを作成してadd, push。
冷静にもう23時なんだけど。いけるのかねぇ。。
2. objを用意する
3dデータ共有サイトありがとう！！！(ここでobjとmtlファイルget)
https://poly.google.com/search/computer
ARjs用って何がどうそれ用なのかわからないけどありがとう！！(ここでpattern-target.pattファイルget)
https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
3. AR.js AFrame 使ってindex.html作成する
さっき適当に作ったhtmlをいい感じに書き換えるん。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>3dmeshitero</title>
</head>
<body style="margin:0px; overflow:hidden;">
<!-- AR.js A-Frame用意 -->
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<a-scene embedded arjs="debugUIEnabled:false;">
<a-assets>
<!-- 3Dオブジェクトを設定 -->
<a-asset-item id="ram-obj" src="model_obj/ram/ram.obj"></a-asset-item>
<a-asset-item id="ram-mtl" src="model_obj/ram/ram.mtl"></a-asset-item>
</a-assets>
<a-marker type="pattern" url="pattern-target.patt">
<a-obj-model id="ram" src="#ram-obj" mtl="#ram-mtl" position="0 0 0" scale="0.5 0.5 0.5" rotation="0 0 0"></a-obj-model>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
4. ORCodeにする
このままだと見にくいのでherokuのリンクをQRCode化。
QRCode作成サイトありがとう！！
5. 試してみる。
携帯で読み取って
こちらかざすと
見えるはず！！！（いらすとやさんより「木のテーブルのイラスト（正面）」を使わせていただきました。）
縮尺の調整がわからなかったので横で見た方がよくわかると思われ。
3dオブジェクトはsugamoさんのラーメンを使わせていただきました。
https://poly.google.com/view/0wXZw_lvY35
（~23:40）
まとめ
こう、12月に入って今年ももう終わりそうな顔をしてきているじゃないですか
あれ。。今年の初めから何ができるようになったんだろう。。虚無。。という気持ちになって凹んできたので
前からやってみたいと思って全く手をつけていなかったARVR周りとして、上記を思い立ったら吉日とばかりに2時間ほどですが見れるところまで走ってみました。
諸々よくわかってないし、調べてもいませんが、ひとまず動くところまで行くことができました。本気ネットーワーク様感謝
できればこの辺使って姉に年賀状を送れるようにもう少し頑張ろうと思います。
ではではおやすみなさい 