Zum Hauptinhalt springen

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:

PackageContent 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.

FeatureContent Value
World Effects, VPS, Image Targetsslam
Hand Trackinghand
Face Effectsface
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"]