<Loader /> Component not working for SDK for React + Three.js


#1

I followed your docs on this page.

import { .....,Loader} from "@zappar/zappar-react-three-fiber";

..........
return (
  <>
  <ZapparCanvas>
    ........
   <Loader onLoad={()=>{console.log("Loaded")}}></Loader>
  </ZapparCanvas>
</>

I don’t see any loader screen, nor do I see “Loaded” in the console.

I tried both @zappar/zappar-react-three-fiber 1.0.3 and 1.0.2, both don’t work.


#2

Hi @hol.experiences,

Thank you for reporting the issue. I will get back to you after investigating this :slight_smile:


#3

@hol.experiences

Do you have any assets in your scene which are loaded (models/textures)? I’ve just tested the Loader component with a 3D model and it worked as expected.


#4

Does it only work when a model needs to be loaded? I thought it will appear when the trackers are loading. Is there a trigger for when the trackers/camera finishes loading?


#5

The Loader component is basically a wrapper of DefaultLoadingManager which is used for assets. Here’s the source if you would like to have a look how it works.

You may listen in for “onFirstFrame” which is emitted after the first frame is processed.
<ZapparCamera onFirstFrame={() => { console.log("camera is ready"); }} />

Hope this helps! :slight_smile:


#6

Thanks, will try it out