Using two declarative model elements with the same URL

Hello!

I’ve been learning how to use Babylon recently, and immensely enjoying it, especially the inspector! One aspect I’m very interested in is its integration with React. I’m trying to develop a scene containing two elements that load the same model URL, like that:
<ModelWithFallback
name=“model1”
rootUrl={

}
sceneFilename={“Avocado/glTF-Binary/Avocado.glb”}
position={new Vector3(0.5, 0, 0)}
scaleToDimension={0.75}
/>
<ModelWithFallback
name=“model2”
rootUrl={

}
sceneFilename={“Avocado/glTF-Binary/Avocado.glb”}
position={new Vector3(-0.5, 0, 0)}
scaleToDimension={0.75}
/>

When running this code, I can see both of the fallback spheres, however, once the model loads, I can only see one of them on the scene, and there is only one node on the explorer:

Here’s the CodeSandbox URL for this example: keen-mendel-hmivh - CodeSandbox

I’ve tried setting the “id”, “uniqueId”, etc properties, but couldn’t get the two models to be displayed. Is there anything I’m missing?

Thanks for the attention!

1 Like

Adding @brianzinn in case he has some ideas.

It’s actually due to how the promises are being cached and stored - the URL of the model is used for the cache lookup. What Suspense does is catch the promise that I am throwing and then returns when the model is loaded. The part that is broken is that I need to use an additional optional identifier (like ‘key’) and then I can cache them separately and also separately I should be clearing my cache when the component is unmounted.

In your case, however, I would not load the model twice. What I would instead do is clone the first loaded model, but that may be more difficult if you don’t know the model structure in advance. If you need access from reconciler for properties like position dynamically then you can use

  <abstractMesh fromInstance={clonedMesh} />

or

<instancedMesh source={meshes[0]} ... />

Another workaround would be to make the requests unique and you should be able to bust my cache with a querystring, but then the browser cache will be skipped:

<ModelWithFallback
  ...
  sceneFilename={'Avocado/glTF-Binary/Avocado.glb?id=1'}
  /*                                                ^^^ */
/>

The original SceneLoader that worked without promises and Suspense handled your use case well and loaded it twice correctly. On the one hand it is an improvement, but then it has caused these issues with edge cases. Are you able to figure it out with that information or if you require more help or have a suggestion for the react-babylonjs library itself then I am open to suggestions.

3 Likes

Thank you very much for your answer, and sorry for taking so long to answer back - hadn’t had time to look at this yet. The loading the model just once idea worked great, spend some time figuring it out but once it clicked it was a breeze. I modified the previous example with both the AbstractMesh and InstancedMesh ideas, so if anyone else has the same problem, they can check this out to help:

With Abstract: LoadBabylonJSMeshes - AssetContainer - CodeSandbox
With Instanced: LoadBabylonJSMeshes - Instances - CodeSandbox