Basically I have imported a blender model into my scene. Now I want to implement a GUI to allow the user to manipulate the color of my blender model. Can anyone advise if this is possible via ThreeJS or will I require another library?
To be more clear, I was wondering would it be possible to grab the mesh and change it’s texture after it has been rendered onto the browser?
this is react + three so i don’t know if that’s something you want to attempt, but sure enough it would make it quite straight forward. akkella made a youtube tutorial about this once and this is the completed project (click the shoe and the gui pops up).
No, you don’t need a separate library for this. Assuming you are exporting to glTF, you can change the loaded asset in various ways. E.g. you can access the meshes in your asset by assigning them a name in your DCC tool and then use Object3D.getObjectByName() to query it. And yes, it is possible to change the a model’s texture after it has been loaded and rendered.
Thank you this is what I’m looking for since I’m decent at React! Btw, what do you think of Mugen87’s solution?
In other words, what is the standard way to do this if gltfjsx or R3F did not exist?
No point in asking me, i am 100% biased. The standard way in my opinion is flawed. Mutation has and always will cause problems. Mounting the scene that you get from GLTFLoader makes the asset unfit for re-use, querying nodes is cumbersome.
A workflow like this https://twitter.com/0xca0a/status/1506358321711828992 does not exist in the imperative world.
Thank you so much for your help! I am currently learning Blender and will use your method to render and manipulate the color of my model. Btw, do happen to know Typescript? I was just wondering how compatible R3F is with Typescript and how much of a headache it would be to convert a vanilla JS R3F project to Typescript as I am also learning TS at this moment.
it’s fully typed. that even includes your blend file: npx gltfjsx model.glb --types