Does anyone know how to reload the screen while the model URLs are changing dynamically in react-babylon?

Questions
1

Here is my block of code for model.

**<Suspense fallback={<box name="fallback" />}>
                <Model
                  rootUrl={`https://raw.githubusercontent.com/chaitanyaGitHub1/Images/main/`}
                  sceneFilename={selected_measurement_Style_url}
                  scaleToDimension={0}
                  // morphTargetManager={  }
                  // scaling={new Vector3(1,1,1)}
                  onCreated={(e) => {
                    onCreatedBlouse(e)
                  }}
                  onModelLoaded={(model) => {
                    onBlouseModelLoaded(model)
                    // setLoadModel1(true);
                  }}
                  name={''}
                ></Model>
**

selected_measurement_Style_url is the variable will be changing when user selects a new blouse style. I am getting a overlap issue. The new model is loading on top of previous model For example blouse [Top garment ] @brianzinn
Thank you .

Screenshot from 2022-08-22 10-55-50
Screenshot from 2022-08-22 10-55-501924Ă—503 127 KB

2

cc @brianzinn :slight_smile:

3

hi @Chaitanya_Yanamala
I haven’t seen the <Model ../> component used that way before. One way would be to key off the sceneFilename. That will force the previous model to be disposed:

  <Suspense ..>
    <Model
      key={selected_measurement_Style_url}
      sceneFilename={selected_measurement_Style_url}
      ...
    </Model>
  </Suspense>

Another perhaps more intuitive approach is to move those into the useEffect dependency array in the <Model ../> component, which matches the <Suspense ..>... cache.

You can see that the Model component is a lightweight Functional Component wrapping the useSceneLoader hook. I wouldn’t necessarily want to necessarily dispose() the model without at least a minor bump to add those props as dependencies.

1 Like
4

Thank you @brianzinn @Deltakosh for the reply. I will try this way.

5

I did’t get exactly how to do that way Is there any simple line of code to reload the scene when I change the model URL .

  useEffect(() => {
    if (scene) {
      // scene.dispose();

      scene.getEngine().runRenderLoop(() => {
        if (scene) {
          scene.render();
        }
      });
    }

  }, [selected_measurement_Style_url])

Can I do anything like this .

6

You don’t need to reload the scene - just change the file name and it will dispose the old and load the new automatically. I’ll make some time for a code sandbox hopefully on Sunday - there’s another similar question being asked that needs same answer.

There are some recipes that hide the model and reload it if needed by just showing again, but they rely on the useSceneLoader hook and are better for a finite list of models.

1 Like
7

have a look here:
floral-water-els13w - CodeSandbox

I can be easily convinced that adding key shouldn’t be default behaviour as it’s not intuitive or user-friendly.

1 Like
8

Thank you @brianzinn