The hosted 8th Wall platform was retired Feb 28, 2026. Existing published experiences continue to run until Feb 28, 2027. View Migration Guide View Announcements
A-Frame
A-Frame is a web framework designed for building virtual reality experiences. By adding 8th Wall Web to your A-Frame project, you can now easily build augmented reality experiences for the web.
Components
| Component | Description |
|---|---|
| xrconfig | Used to configure the camera feed |
| xrweb | Used to configure world tracking |
| xrface | Used to configure face effects |
| xrlayers | Used to configure sky effects |
| xrlayerscene | Used to configure sky effects |
Functions
| Function | Description |
|---|---|
| xrconfigComponent | Creates an A-Frame component for configuring the camera which can be registered with AFRAME.registerComponent(). Generally won't need to be called directly. |
| xrwebComponent | Creates an A-Frame component for World Tracking and/or Image Target tracking which can be registered with AFRAME.registerComponent(). Generally won't need to be called directly. |
| xrfaceComponent | Creates an A-Frame component for Face Effects tracking which can be registered with AFRAME.registerComponent(). Generally won't need to be called directly. |
| xrlayersComponent | Creates an A-Frame component for Layers tracking which can be registered with AFRAME.registerComponent(). Generally won't need to be called directly. |
| xrlayersceneComponent | Creates an A-Frame component for a Layer scene which can be registered with AFRAME.registerComponent(). Generally won't need to be called directly. |
Examples
Example - SLAM enabled (default)
<a-scene xrconfig xrweb>
Example - SLAM disabled (image tracking only)
<a-scene xrconfig xrweb="disableWorldTracking: true">
Example - Front camera (image tracking only)
<a-scene xrconfig="cameraDirection: front" xrweb="disableWorldTracking: true">
Example - Front camera Sky Effects
<a-scene xrconfig="cameraDirection: front" xrlayers>
Example - Sky + SLAM
<a-scene xrconfig xrweb xrlayers>
<a-entity xrlayerscene="name: sky; edgeSmoothness:0.6; invertLayerMask: true;">
<!-- Add your Sky Effects content here. -->
</a-entity>
</a-scene>
Example - Face Effects
<a-scene xrconfig xrface>
Example - Face Effects with Ears
<a-scene xrconfig xrface="enableEars:true">