I preface all of this by saying that I’m new to this community and got completely sucked into the JS development world a month or so ago and three.js recently.
I’m looking to build a map editor of sorts and I’ve been looking up different design patterns so that I can setup my app so that it’s easy to reason about and extend. I feel like I’m getting a bit of analysis by paralysis from searching the web to try to find answers about state driven scenes and approaches to bind data to the threejs output.
My question is:
I would like to have my app state (basic position, rotation, material name, cursor position, etc) in a single source of truth (vuex state management) so that I can easily dispatch mutations and let the scene graph and render be a function of the state. This unidirectional data flow makes everything super clear, easy to follow, and awesome (or so I think in my naivety).
I’m trying to figure out what the most economical way is to connect the state to the scene graph.
In the simplest and most pure way I’d just trash everything and re-add it as a total pure function but that feels like it would be exceptionally “unperformant”
What I’d love to do is have something be fairly declarative and let threejs mutate its own components are required by retaining components in the scene graph but syncing them with the state.
In my mind I’m thinking:
- Do I track objects by uuid to see if they exist and create them if they don’t
- Do I write wrappers that match state to uuid on updates checking for diffs or just resetting all of their values based on state? Is that traversal really inefficient or maybe I create a lookup table to sync state → graph object values?
One thing I’d like to do is use Vuex as my statement management so that I can use Vue components to mutate some of the scene objects easily. Since Vuex is a mutable state compared to react, I thought it might work more easily with the mutable scene graph (though I understand that some components of objects like their position/Vector3 are immutable objects).
I feel like I’m missing something obvious and spinning my wheels as a result.
Am I being silly for wanting to do this?
Thanks to anyone who has any insight on this and for considering my question.