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 cannot be used simultaneously.

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