PlayCanvasを始めるにあたって

まずは、https://playcanvas.com/user/the8thwallにアクセスし、サンプルプロジェクトをフォークしてください。

• Starter Kit サンプルプロジェクト

  • Image Tracking Starter Kit: PlayCanvasでImage Trackingアプリケーションを素早く作り始めるためのアプリケーションです。
  • World Tracking Starter Kit: PlayCanvasでWorld Trackingアプリケーションを素早く作り始めるためのアプリケーションです。
  • Face Effects Starter Kit: PlayCanvasでフェイス・エフェクトのアプリケーションを素早く作成するためのアプリケーションです。
  • Sky Effects Starter Kit: PlayCanvasでSky Effectのアプリケーションを素早く作成するためのアプリケーションです。
  • Hand Tracking Starter Kit: PlayCanvas で Hand Tracking アプリケーションを素早く作成するためのアプリケーションです。

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

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

App Keyを追加する

「設定」-> 「外部スクリプト」に移動します。

次の2つのスクリプトを追加します。

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

XXXXXX を、8th Wall Consoleから入手した独自のApp Keyに置き換えてください。

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

1. 「設定」->「レンダリング」に進みます。
2. 「透明なキャンバス」にチェックが付いていることを確認してください。

「WebGL2.0を優先する」を無効にする

1. 「設定」->「レンダリング」に進みます。
2. 「WebGL2.0を優先する」の**チェックが外れている **ことを確認します。

xrcontroller.jsを追加する

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

注: SLAMおよび/またはイメージ・ターゲットプロジェクトにのみ適用されます。 xrcontroller.jsと、facecontroller.jsまたはlayercontroller.jsは、同時に使用することはできません。

オプション	説明
disableWorldTracking	trueの場合、効率化のためにSLAMトラッキングをオフにします。
shadowmaterial	透明な影のレシーバーとして使用したい素材です（地面の影など）。 一般的にこの素材は、(0,0,0)に位置する"ground"平面エンティティに使用されます。

layerscontroller.jsを追加する

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

注: Sky Effectのプロジェクトのみです。 layerscontroller.jsと、 facecontroller.jsまたはxrcontroller.js は、同時に使用することはできません。

facecontroller.jsを追加する

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 は同時に使用できません。

オプション	説明
headAnchor	ワールド空間において頭部のルートに固定するためのエンティティです。

handcontroller.jsを追加する

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

注: Hand Trackingプロジェクトに限ります。 handcontroller.js および xrcontroller.js または layerscontroller.js または facecontroller.js は同時に使用できません。

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