Loading UI
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.