Problem changing object color using lil-gui

Questions
1

Project uses latest versions of ThreeJS, lil-gui and develops using vite packager.
Using lil-gui to let user interact with 3JS object. Parameters like geometric shape (i.e. cube) and size work fine. But color editing does not work fine.
The color picker pops up when lil-gui item is selected but chosen new color affects only the lil-gui display not the object.
Here are the major steps I use:

  1. import GUI from ‘lil-gui’ at top of JS file
  2. const data = {color: ‘#33aa33’}; declared, along with other parameters
  3. const material = new THREE.MeshStandardMaterial({ color: data.color});
  4. const gui = new GUI();
  5. gui.addColor( data, ‘color’).onChange( () =>
    {
    material.color.set(data.color);
    })
    This seems to be consistent with some examples I’ve seen. So what have I missed?
    Thanks for suggestions.
2

Is the material actually assigned to replace the original materials in all related model parts?

3

Hi,

Can you put together a minimal code example via CodePen or JsFiddle? This is usually the best way others can help with issues. Here’s a minimal code example working with your details. Feel free to use this as a jumping off point:

https://jsfiddle.net/q4t3fcmL/

1 Like
4

The object of interest is one of the 5 so-called Platonic solids. My makeSolid() function takes an index 0-4 and a size to make the figure. For example, index of 1 and some radius causes this to run:

new THREE.BoxGeometry(radius, radius, radius)
The lil-gui “size” input invokes the following

function resizeGeometry(newRadius)
{
mesh.geometry.dispose();
data.radius = newRadius;
mesh.geometry = makeSolid(currentIndex, data.radius);
}

The lil-gui response to set a new color is just ‘material.color.set(data.color’.
I will work on creating a minimal version of this project to follow the idea of oldsegotia.
Thanks to both for responding.

5

Also pardon my messing up Blockquote usage!

6

Oh crap! Paint my face red. :grimacing:
I started stripping out code to create minimal app. When I looked at my lighting setup I noted DirectionalLight color and the lil-gui color band were set to the same initial value defined for the graphic object Cube. The value was not white.
So when the cube surface was supposed to change via lil-gui, the intrinsic color gets mixed with the still-inforce, initial, non-white DirectionalLight value. Thus, the apparent color looks wrong.
Changing directional light to white fixed the problem.
In the immortal words of Bugs Bunny: ‘what a maroon’ (moron).

2 Likes