So, this is what my window is supposed to look like;
And the left section is supposed to be made in react -
react should drive the app period. if your app lets react control the UI and threejs runs as a blackbox inside a useeffect the app is practically set up to fail. grabbing into an imperative system by queries and mutation is fundamentally wrong, this is what react was made to prevent in the first place.
react-dom renders jsx to the dom, react-three-fiber renders jsx to threejs. the dom and threejs are one, driven by the same state model, composed of re-usable components.
What I understand from your reply is that, I shouldn’t manipulate 3js object from react components, then how can I achieve something like this? Any directions that I should move forward with?
just like you construct the ui with <div> and <span> you construct the three scene with <mesh> and <boxGeometry>. if both worlds are declarative then they also react to state and props naturally. this is fundamentally what react is for. build your app as you always would and use this for the threejs part: React Three Fiber Documentation
