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

2 Likes

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).

2 Likes

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

1 Like