Hello everyone,
I am working on a small side project using Next.js, Three.js, and React Three Fiber.
The project consists of a small dashboard where users can manage their projects. Each project is essentially a 3D GLTF model chosen from a set of templates I’ve created (these templates are predefined 3D models stored in a remote source). My goal is to build a small configurator that extracts all the materialNames: Array<string> from a selected model, stores them in a proxy using Valtio, and maps over them outside the Canvas as Buttons. This proxy also holds the currently activeMaterialName: string , which I have already implemented.
Additionally, when an activeMaterialName is selected, I display an Editor component. The Editor includes a color picker (for changing the material color) and two sliders: one for adjusting metalness and the other for roughness. I’m primarily working with MeshStandardMaterials, which can be customized.
My question is: what would be the best way to ensure the Editor component gets the activeMaterial object reference (would be the materials object of the model that I am not storing anywhere yet + activeMaterialName) and updates its properties so that both the 3D scene and the UI remain in sync? For instance, when adjusting the roughness slider, the changes should reflect in real-time both in the UI and in the 3D model.
Any feedback or further clarification on the topic is welcome!
Thank you!