【webARの王道：8thwall】web版始め方

環境

ProductName: macOS
ProductVersion: 11.2
vscode

1.githubから8thwallのファイルをとってくる

URL:

zsh

# ディレクトリ作る
mkdir 8thwall
# 移動
cd 8thwall
# lsやってみた
ls
# cloneする
git clone https://github.com/8thwall/web.git
# コメント出てきた
Cloning into 'web'...
remote: Enumerating objects: 1250, done.
remote: Total 1250 (delta 0), reused 0 (delta 0), pack-reused 1250
Receiving objects: 100% (1250/1250), 77.31 MiB | 8.59 MiB/s, done.
Resolving deltas: 100% (589/589), done.
# vscodeで開く
code .

2.App keyをindex.htmlに入れる

この記事のデモだと、gettingstarted/xaframe/index.htmlのappleyを変更する
入れ方のURL：https://www.8thwall.com/quick-start-web

3.デバイスの認証をする

意外と面倒なので、うまくいかない場合はこちらで一度認証を削除する
https://apps.8thwall.com/token/remove

4.serveファイル内でnpm installを実行する。

zsh

# ls
web git:(master) ls
README.md      examples       gettingstarted images         serve          xrextras
# serveに移動
cd serve
# npm install
web git:(master) cd serve
serve git:(master) npm install
# 1ファイルもどる
serve git:(master) cd ..
# 以下のコマンドを実行
# "./serve/bin/serve -d ./gettingstarted/xraframe"
web git:(master) ./serve/bin/serve -d ./gettingstarted/xraframe
# PORTが8080でサーバーが立ち上がった
8888888888888888888888888888888888888888888888888888888888888888
8
8  ./serve/bin/serve [options]
8  -d DIR    path to serve [required]
8  -p PORT   default PORT=8080
8  -h        hot reload on localhost
8  -r        enable hot reload
8  -i IFACE  choose network interface
8  -n        don't print these instructions
8  -- ...    forwarded to serve
8
8888888888888888888888888888888888888888888888888888888888888888

その下はこんな感じ

QRコードをスマホで読み取るとサンプルプロジェクトが立ち上がる。

無駄なファイルがたくさんある、、、、、。

serverを起動するpathを変更してあげると違うプロジェクトも開けます。

参考