XR8.AFrame

A-Frame (https://aframe.io) 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">