Skip to main content

Getting Started with PlayCanvas

To get started go to https://playcanvas.com/user/the8thwall and fork a sample project:

  • Starter Kit Sample Projects

  • Additional Sample Projects

    • World Tracking and Face Effects: An example that illustrates how to switch between World Tracking and Face Effects in a single project.
    • Color Swap: An application to get you started quickly creating AR world tracking applications that include simple UI and color change.
    • Swap Scenes: An application to get you started quickly creating AR World Tracking applications that switch scenes.
    • Swap Camera: An application that demonstrates how to switch between front camera Face Effects and back camera World Tracking.

Add your App Key

Go to Settings -> External Scripts

The following two scripts should be added:

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

Then replace XXXXXX with your own unique App Key obtained from the 8th Wall Console.

Enable "Transparent Canvas"

  1. Go to Settings -> Rendering.
  2. Make sure that "Transparent Canvas" is checked.

Disable "Prefer WebGL 2.0"

  1. Go to Settings -> Rendering.
  2. Make sure that "Prefer WebGL 2.0" is unchecked.

Add xrcontroller.js

The 8th Wall sample PlayCanvas projects are populated with an XRController game object. If you are starting with a blank project, download xrcontroller.js from https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ and attach to an Entity in your scene.

NOTE: Only for SLAM and/or Image Target projects. xrcontroller.js and facecontroller.js or layerscontroller.js cannot be used simultaneously.

OptionDescription
disableWorldTrackingIf true, turn off SLAM tracking for efficiency.
shadowmaterialMaterial which you want to use as a transparent shadow receiver (e.g. for ground shadows). Typically this material will be used on a "ground" plane entity positioned at (0,0,0)

Add layerscontroller.js

The 8th Wall sample PlayCanvas projects are populated with a FaceController game object. If you are starting with a blank project, download layerscontroller.js from https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ and attach to an Entity in your scene.

NOTE: Only for Sky Effects projects. layerscontroller.js and facecontroller.js or xrcontroller.js cannot be used simultaneously.

Add facecontroller.js

The 8th Wall sample PlayCanvas projects are populated with a FaceController game object. If you are starting with a blank project, download facecontroller.js from https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ and attach it to an Entity in your scene.

NOTE: Only for Face Effects projects. facecontroller.js and xrcontroller.js or layerscontroller.js or handcontroller.js cannot be used simultaneously.

OptionDescription
headAnchorThe entity to anchor to the root of the head in world space.

Add handcontroller.js

The 8th Wall sample PlayCanvas projects are populated with a HandController game object. If you are starting with a blank project, download handcontroller.js from https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ and attach it to an Entity in your scene.

NOTE: Only for Hand Tracking projects. handcontroller.js and xrcontroller.js or layerscontroller.js or facecontroller.js cannot be used simultaneously.

OptionDescription
handAnchorThe entity to anchor to the root of the hand in world space.