クイックスタート - 8thwallによるAR

このチュートリアルでは、wonderland-ar-trackingを8thwallと一緒に使用する方法を説明します。

8thwallのサポートする任意のトラッキング機能を使用することができます:

  • SLAMトラッキング
  • イメージトラッキング（平面及び円筒形）
  • 顔トラッキング
  • VPS（事前スキャンのメッシュでオクルージョンを行うワールドトラッキング）

プロジェクトテンプレートのインストール 

wonderland-ar-trackingリポジトリを、ZIP形式でダウンロードする（<> Code > Download ZIP）か、gitでクローンしてください。

フォルダを展開し、examplesから"SLAM-camera"フォルダを、templatesフォルダにコピーします。templatesフォルダはオペレーティングシステムによって次の場所にあります：

  • Windows: %APPDATA%/WonderlandEngine（Windows Explorerのパスバーに %APPDATA% と入力すると、C:\Users\<Username>\AppData\Roaming に解決されます）
  • MacOS: ~/Library/Application Support/WonderlandEngine（~ はあなたのホームフォルダです）
  • Linux: ~/.WonderlandEngine/

プロジェクトの作成 

テンプレートを正しく設定すると、新しいプロジェクトをWonderland Editorで作成する時に次のように表示されます：

クイックスタート - 8thwallによるAR

新しいテンプレートを選択して、プロジェクトを作成できます。

テスト 

ローカルプロジェクトをテストするには、8thwallがHTTPSなしでの提供をブロックするため、ローカル証明書を設定する必要があります。

SSL証明書の設定 

localhost用の独自のSSL証明書を生成するには、Views > Preferences > Serverを開き、「Generate Certificates」をクリックしてください。プリファレンス値は自動的に設定されます。

最後にサーバーを再起動します：エディタウィンドウ上部の「localhost:8080」をクリックし、「Stop Server」をクリックしてサーバーを停止します。その後、「not running」をクリックし、「Start Server」をクリックして再びサーバーを起動します。

スマートフォンでの表示 

Androidの場合：

  1. デバイスで「USBデバッグ」を有効にしていることを確認してください。
  2. USBでデバイスを接続します。
  3. デバイスで「USBデバッグを許可」ダイアログをトリガーするために「ローカルデバイス」を選択します。
  4. 許可されると、ドロップダウンからデバイスを選択できます。
  5. 「SSL」チェックボックスを確認します。
  6. 緑の矢印を押して、スマートフォン上でページをブラウザで起動します。

iOSの場合：

  1. iOSデバイスとMacを同じWi-Fiネットワークに接続します。
  2. Mac上で、Macの名前を探します: システム環境設定 > 共有 に移動し、Macの名前を確認します。
  3. （オプション）上記で生成したSSL証明書をiOSデバイスにインストールします：メールアプリを使用して自分自身に証明書をメールで送るか、Apple Configuratorを使用します。
  4. （オプション）iOSデバイス上で証明書を信頼します：設定 > 一般 > この装置について > 証明書信頼設定 に移動します。
  5. iOSデバイスでSafariを開きます: http://YourMacName.local:8080 または SSLを使用する場合は https://YourMacName.local:8081 と入力します。

公開 

8thwallベースの体験を公開するには、src/index.js内の8thwall APIトークンを置き換える必要があります。

8thwallプロジェクトの作成 

  1. 8thwall.com でアカウントを作成します。8th Wallダッシュボードで、「新しいプロジェクトを開始」をクリックします。
  2. 「セルフホスト」を選択します。
  3. プロジェクト名とニーズに合った「ライセンスタイプ」を設定します。
  4. 「作成」をクリックします。
  5. 「Setup Domains」で、ホストしているドメインを追加します。
  6. 「設定」（左側の歯車シンボル）に移動します。
  7. 「My App Key」セクションからアプリキーをコピーします。

src/index.jsファイルにアプリキーを貼り付けます: window.API_TOKEN_XR8 = '<here>'; の値を置き換えます。