Toggle mesh story - alternative option

[dennemark]

Hi,

I am currently searching for an efficient way to add / remove models from a scene. I think babylonjs offers the asset container for this, but showing and hiding models should be good, too. So I stumbled over the toggle mesh story and thought there is an alternative option to toggle a mesh ( https://github.com/brianzinn/react-babylonjs/blob/master/stories/babylonjs/Basic/toggleMesh.stories.js ). The story toggles all react components and therefore disposes, reloads the meshes fully. This might be a preferable option for many use cases. In my case I think a transformNode as a wrapper to toggle the children is suitable. I tried it in chrome browser with cpu-throttling and one can see, how the models are reloaded in the first version and in the second version they directly appear.

current verison - full dispose and reload:

{isShown &&
code.
}

alternative - hiding of mesh:

<transformNode setEnabled={isShown}>
code...
</transformNode>

[brianzinn]

That demo was originally for a bug in the renderer when adding/removing child components from the root container. I added unit tests last week, so should be able to write a test (instead of having a storybook). Currently also the models appear briefly in the wrong place, so another reason to switch. I'll need to write the unit tests before fixing the story though :) Thanks for the idea!

[dennemark]

Btw. saw some unit tests already! Great resource to learn from :)

[brianzinn]

There is a unit test now for that bug, so probably it's a good opportunity to fix the demo to show the better way with just hiding :)