Babylon.js Viewer - React.js- Load model after fetch is resolved

Questions
1

Hello,

Thank you for the amazing library.

I’m trying to load the model after my fetch promise is resolved. But it seems like the model is not loading.

const App = () => {
  const loadModel = () => {
    fetch('http://localhost:8080/resources/8cfee77a-cab5-4e2a-a35f-2a4a10a30a44')
      .then(res => res.json())
      .then(json => {
        BabylonViewer.viewerManager.getViewerPromiseById('babylon-viewer').then(function (viewer) {
          console.log(json) // I see this in the logs with expected json
          // this will resolve only after the viewer with this specific ID is initialized
          viewer.onEngineInitObservable.add(function (viewer) {
            console.log(json) // I don't see this log
            viewer.loadModel({
              title: "Rabbit",
              subtitle: "BabylonJS",
              thumbnail: "https://www.babylonjs.com/img/favicon/apple-icon-144x144.png",
              url: json.androidModel.fileLocation
            });
          });
        });
      });
  }

  return (
    //when I click my loadModel function is triggered.
    <Container onClick={loadModel}>
      <babylon id="babylon-viewer"></babylon>
    </Container>

  );

Thank you for the help.

2

I removed the above line and when onClick I see loading progress and then the model is loaded perfectly. But now I see an empty scene at first then when I click the process is expected.

Is there a way to put some there an image instead of an empty scene?

3

Adding @RaananW in case he can help with the Babylon viewer.

4

Since you are in a react context, you can actually use react for that :slight_smile:

Just set get a loaded state variable, and show an image until it is true.

The viewer does also support babylon’s native loading screen, so you could configure your own loading screen - an example can be found here - Modify the Babylon.js Viewer | Babylon.js Documentation (babylonjs.com)

The reason the code is not running is because the engine has already initialized. So you are adding a callback to an event that has already happened. I assume the babylon-viewer is loaded in the global namespace, Are you initializing the viewer on your own, or just loading the script file?

Just a small note - The viewer is not 100% react compatible (especially when coming to internal state changes), and i would personally recommend using the babylon-react project instead of the viewer when in a react context.

5

Thanks @Evgeni_Popov

Hi @RaananW, thank you for the answer,

I used loaded state variable and handled loading my model after onclick.
Also I added my loading screen.

I am initialising the viewer on my own, I don’t load script file.

Everything works fine after my onclick. There is still an issue that why do I see initial viewer? I guess react renders when I return it inside the components. If I conditionally return the by loaded state it’s not rendered, I mean I don’t see any viewer.

6

The viewer initializes once, when the page loads. React continuously changes the DOM, adds, removes and mutate DOM elements on each frame. This is the reason why using native react components to load the data would be a better than using the viewer.

You will need to check when the dom elements are added and removed, but it is hard to say

1 Like