メインコンテンツへスキップ

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

オプション説明
disableWorldTrackingtrueの場合、効率化のために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ワールドスペースで手の付け根にアンカーを打つエンティティ。