How to change object color on mouse click?

Hi. I want to change the clothes’ color on mouse click - the user would choose from a color wheel or something like that. I can’t put a finger on what I did wrong… Here is my approach: https://jsfiddle.net/al21al/04v57bz2/3/

If possible, I still need a word of advice. If needed, I can provide in another fiddle the minified version of the code, keeping only the part I have issues with.

You have probably noticed that your raycaster never hits the object? I am not sure why. Maybe first try with Threejs box geometry, and work your way up from there?

1 Like

i realize this may not what you’re looking for, i apologise if that’s the case, but then again, did you know that can use three through react? all the hardship evaporates. this video goes into the possibilities for what you’re after: https://twitter.com/0xca0a/status/1341811710081044483

this is the project behind this: Shoe configurator - CodeSandbox

and there’s a full tutorial on this made by akella: 3D model configurator with React Three Fiber and gltfjsx - YouTube

the whole thing, loading models, events, binding it to state and other components (the color picker) is so trivial that you wouldn’t have to think about it, you just put it together.

1 Like

@awonnink I will try to start with a cube and try it that way, thanks for the tip.
@drcmda Thank you a lot, I will look into the links you provided and hopefully I manage to add the color picker to what I already have.