Where are rendered meshes stored?

Hello friends!

I am working on app where I combine Pixi.js for 2D preview and Babylon.js for 3D preview. To combine these two frameworks I use Vue.js 3 with Vuex as single source of truth.

I am wondering if there is something like javascript list which holds all currently rendered meshes and if there is one, may I make it reactive? Let’s say that if I delete/add mesh to this list it will be deleted/rendered in the scene.

Why would I want such a behavior? Because Vuex can track all state changes in registered objects and therefore it would make undo/redo operation really easy as it would be just switching between those states.

you can try to play with scene.meshes which represent the list of active meshes


Be careful when you store Babylonjs meshes in a Vuex store or just a plain Vue variable; when they are made reactive, your app may explode since Vue injects a lot of stuff into the mesh object to make it reactive. I would probably do a separate, simpler object, that I save to Vuex store when the mesh is initialized, that has a weakish link to the original mesh (with some sort of id, for example).


Some doc: How to pass data between BabylonJS and Vue | Babylon.js Documentation

1 Like