本文へスキップ

PlayCanvasを始める

始めるにはhttps://playcanvas.com/user/the8thwallに行き、サンプル・プロジェクトをフォークする：

  • スターターキット サンプルプロジェクト

  • その他のサンプル・プロジェクト

    • ワールドトラッキングとフェイスエフェクト：1つのプロジェクトでワールドトラッキングとフェイスエフェクトを切り替える方法を説明する例です。
    • カラースワップ：簡単なUIと色の変更を含むARワールドトラッキングアプリケーションを素早く作成するためのアプリケーションです。
    • Swap Scenes：シーンを切り替えるARワールドトラッキングアプリケーションを素早く作成するためのアプリケーションです。
    • Swap Camera：フロントカメラのフェイスエフェクトとバックカメラのワールドトラッキングを切り替える方法を示すアプリケーション。

アプリのキーを追加する​

設定 -> 外部スクリプト

以下の2つのスクリプトを追加する：

  • https://cdn.8thwall.com/web/xrextras/xrextras.js
  • https://apps.8thwall.com/xrweb?appKey=XXXXXX

次に、XXXXXを8th Wall Consoleから取得したあなた独自のApp Keyに置き換えてください。

透明キャンバス」を有効にする​

  1. 設定」→「レンダリング」。
  2. Transparent Canvas "がチェックされていることを確認してください。

WebGL 2.0を優先する」を無効にする​

  1. 設定」→「レンダリング」。
  2. Prefer WebGL 2.0 "がチェックされていないことを確認してください。

xrcontroller.js {#add-xrcontroller}を追加する。​

8th WallのサンプルPlayCanvasプロジェクトには、XRControllerゲームオブジェクトが配置されています。 空のプロジェクトから始める場合は、https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/からxrcontroller.jsをダウンロードし、シーン内のEntityにアタッチします。

注*：SLAMおよび/またはイメージターゲットプロジェクトに限ります。 xrcontroller.js と facecontroller.js または layerscontroller.js を同時に使用することはできない。

オプション説明
ディスエイブルワールドトラッキングもしtrueなら、効率化のためにSLAMトラッキングをオフにする。
シャドウマテリアル透明な影のレシーバーとして使用するマテリアル（グランドシャドウ用など）。 通常、このマテリアルは、(0,0,0)に位置する "グラウンド "プレーンのエンティティで使用されます。

layerscontroller.jsの追加​

8th WallのサンプルPlayCanvasプロジェクトには、FaceControllerゲームオブジェクトが配置されています。 空のプロジェクトから始める場合は、https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/からlayerscontroller.jsをダウンロードし、シーン内のEntityにアタッチします。

注*：Sky Effectsプロジェクトに限ります。 layerscontroller.jsと facecontroller.jsまたはxrcontroller.js` を同時に使用することはできない。

facecontroller.js {#add-facecontroller}を追加する。​

8th WallのサンプルPlayCanvasプロジェクトには、FaceControllerゲームオブジェクトが配置されています。 空のプロジェクトから始める場合は、https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/からfacecontroller.jsをダウンロードし、シーンのEntityにアタッチする。

NOTE：Face Effectsプロジェクトに限ります。 facecontroller.js と xrcontroller.js または layerscontroller.js または handcontroller.js を同時に使用することはできない。

オプション説明
ヘッドアンカーワールドスペースでヘッドの根元にアンカーを打つエンティティ。

handcontroller.js {#add-handcontroller}を追加する。​

8番目のWallサンプルPlayCanvasプロジェクトには、HandControllerゲームオブジェクトが配置されています。 空のプロジェクトから始める場合は、https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/からhandcontroller.jsをダウンロードし、シーンのEntityにアタッチします。

注*：ハンドトラッキングのプロジェクトに限ります。 handcontroller.js と xrcontroller.js または layerscontroller.js または facecontroller.js を同時に使用することはできない。

オプション説明
ハンドアンカーワールドスペースで手の付け根にアンカーを打つエンティティ。