Hosted packages

Meta tags

Use 8th Wall <meta> tags to quickly load common renderers and packages to your cloud editor project.

Use the name attribute to specify whether you are loading a renderer or a package, and the content attribute to specify which renderer/package:

<meta name="8thwall:renderer" content="renderer:version">
<meta name="8thwall:package" content="@package.package">

Renderers

You can use the <meta name="8thwall:renderer" ...> tag to load A-Frame, three.js or Babylon.js to your cloud editor project:

<meta name="8thwall:renderer" content="aframe:version">
<meta name="8thwall:renderer" content="threejs:version">
<meta name="8thwall:renderer" content="babylonjs:version">

aframe

Only certain versions of A-Frame are supported via the <meta> tag. This is because 8th Wall uses a custom version of A-Frame that makes various improvements to better support AR.

• 0.8.2
• 0.9.0
• 0.9.2
• 1.0.3
• 1.0.4
• 1.1.0
• 1.2.0
• 1.3.0
• 1.4.1
• 1.5.0

Example

<meta name="8thwall:renderer" content="aframe:1.5.0">

threejs

All versions of three.js are supported via the <meta> tag.

Note that three.js 160+ requires the use of import maps instead of a <meta> tag. See here for an example.

Example

<meta name="8thwall:renderer" content="threejs:159">

Packages

You can use the <meta name="8thwall:package" ...> tag to load common packages to your cloud editor project:

Package	Content Value
XRExtras	@8thwall.xrextras
Landing Pages	@8thwall.landing-page
Coaching Overlay	@8thwall.coaching-overlay
Vue	@vuejs.vue
HoloVideoObject	@mrcs.holovideoobject
React	@react.react
React DOM	@react.react-dom
React Router DOM	@react.react-router-dom
A-Frame Extras	@aframe.aframe-extras
A-Frame Physics System	@aframe.aframe-physics-system

Example

<meta name="8thwall:package" content="@8thwall.xrextras">

All of the <meta> tags above evaluate to official CDN URLs. They will pull the latest supported version of the package. If you want to use a specific version, use a <script> tag instead.

8th Wall CDN

8th Wall hosts a variety of packages fixed to specific versions on our CDN for convenience.

ammo

• https://cdn.8thwall.com/web/aframe/ammo.wasm.js
• https://cdn.8thwall.com/web/aframe/ammo.wasm.wasm

aframe-physics-system

• https://cdn.8thwall.com/web/aframe/aframe-physics-system-3.2.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-physics-system-4.0.1.min.js
• https://cdn.8thwall.com/web/aframe/aframe-physics-system-4.0.1-updated.min.js
• https://cdn.8thwall.com/web/aframe/aframe-physics-system-4.2.2.min.js

aframe-animation-component

• https://cdn.8thwall.com/web/aframe/aframe-animation-component-5.1.2.min.js

aframe-chromakey-material

• https://cdn.8thwall.com/web/aframe/aframe-chromakey-material-1.1.1.min.js

aframe-extras

• https://cdn.8thwall.com/web/aframe/aframe-extras-4.2.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-6.1.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-6.1.1.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-7.2.0.min.js
• https://cdn.8thwall.com/web/aframe/aframe-extras-7.2.0.min.js

aframe-particle-system-component

• https://cdn.8thwall.com/web/aframe/aframe-particle-system-component-1.1.3.min.js
• https://cdn.8thwall.com/web/aframe/aframe-particle-system-component-1.1.4.min.js

aframe-spe-particles-component

• https://cdn.8thwall.com/web/aframe/aframe-spe-particles-component.min.js

depthkit

• https://cdn.8thwall.com/web/aframe/depthkit-1.0.0.min.js

holovideoobject

• https://cdn.8thwall.com/web/mrcs/holovideoobject-0.2.2.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.2.2.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.2.3.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.2.5.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.1.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.2.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.3.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.4.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.6.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.3.7.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.4.0.min.js
• https://cdn.8thwall.com/web/mrcs/holovideoobject-1.5.0.min.js

8th Wall Engine

You can use the <meta name="xr8:preloadChunks" ...> tag or the window._XR8Chunks variable for more granular control over which pieces of the engine get loaded.

Feature	Content Value
World Effects, VPS, Image Targets	slam
Hand Tracking	hand
Face Effects	face
Sky Effects (coming soon)	-

Cloud Editor Example

If you are using the cloud editor, add the <meta> tag to the bottom of head.html and set the content value to a comma-separated list of features you want to load:

<meta name="xr8:preloadChunks" content="slam,face,hand">

Non-Cloud Editor Example

If you aren't using the cloud editor, you can set window._XR8Chunks to an array of strings specifying the features you want to load:

window._XR8Chunks = ["slam", "face", "hand"]