Getting Started with PlayCanvas
To get started go to https://playcanvas.com/user/the8thwall and fork a sample project:
-
Starter Kit Sample Projects
- Image Tracking Starter Kit: An application to get you started quickly creating image tracking applications in PlayCanvas.
- World Tracking Starter Kit: An application to get you started quickly creating world tracking applications in PlayCanvas.
- Face Effects Starter Kit: An application to get you started quickly creating Face Effects applications in PlayCanvas.
- Sky Effects Starter Kit: An application to get you started quickly creating Sky Effects applications in PlayCanvas.
- Hand Tracking Starter Kit: An application to get you started quickly creating Hand Tracking applications in PlayCanvas.
- Ear Tracking Starter Kit: An application to get you started quickly creating Ear Tracking applications in PlayCanvas.
-
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"
- Go to Settings -> Rendering.
- Make sure that "Transparent Canvas" is checked.
Disable "Prefer WebGL 2.0"
- Go to Settings -> Rendering.
- 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.
Option | Description |
---|---|
disableWorldTracking | If true, turn off SLAM tracking for efficiency. |
shadowmaterial | Material 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.
Option | Description |
---|---|
headAnchor | The 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.
Option | Description |
---|---|
handAnchor | The entity to anchor to the root of the hand in world space. |