Select objects with mouse and change color with dat.gui [SOLVED]

Hello,
I’ve created three objects and I want to select one of them with mouse and change the color via dat.gui. I’ve created a pen. Could you please help me with this.
Thank you very much

See the Pen Change color with dat.gui by brabbit640 (@brabbit640) on CodePen.

Use THREE.Raycaster() with mouse events.
A very basic example of interaction:
https://threejs.org/examples/?q=intera#webgl_interactive_cubes

I went through this example. But what I can’t figure out is how to pass the clicked object to dat.gui. Could you please point me to some tutorial or example which has the clicked object remain selected.
Thank you

Add a global variable where you store the curren selected object, then simply change its material’s color via dat.GUI.

7 Likes

Nice demo! :blush:

1 Like

Wow! Thanks so much! :grinning::blush::raised_hands::+1:

You’re welcome :slight_smile: :beers:

1 Like

It is also possible, I believe, to generalize this by passing a Proxy to dat.GUI, such that whenever a property on the proxy is modified, the global/selected target is modified instead. I remember to have done some experiments with this, but also remember that it was some of a pain to get it right… For most (all?) cases it is probably enough to use a “relay” object combined with the onChange of dat.GUI, as in prisoner849’s solution.

1 Like