Loading UI

• Getting Started
• React Three.js
• Universal AR

For your convenience, this package includes a Loader component that you can use to display a progress bar while your experience loads (should you wish to). It takes over the global instance of Three's LoadingManager.

The <Loader /> is used by adding it to the canvas like this:

import {Loader, /*...*/ } from '@zappar/zappar-react-three-fiber'
// ....

  <ZapparCanvas>
    <ZapparCamera rearCameraMirrorMode="css"  />
    <FaceTracker>
      <Suspense fallback={null}>
        <HeadMaskMesh  />
        <Model />
      </Suspense>
    </FaceTracker>
    <directionalLight position={[2.5, 8, 5]} intensity={1.5} />
    <Loader />
  </ZapparCanvas>

The Loader will automatically handle the showing and hiding of the screen during the loading process.