Best way to set a Color on a material from separate R, G, B numbers?

[dangrabcad]

When a prop is a Color, you can use the set shortcut to pass a 0xrrggbb number or a string and have the Color updated when the prop changes. But I don't have either of those things (in this case): I have three separate 0-1 numbers for red, green, and blue. The obvious thing I thought of was to use the fact that some non-Object3D classes can be elements, like this:

<meshPhysicalMaterial ...>
    <color args={[r, g, b]} />
</meshPhysicalMaterial>

but 1. this would recreate the Color each time instead of calling setRGB, and 2. it doesn't work anyway because Color is not wrapped as a JSX element (at least the type system doesn't think so; maybe it's just out of sync with the code). There are a few alternatives that work with different downsides:

1. Make the color object in a useMemo, and that seems like the simplest code, but it means making a new Color object each time it changes, which feels a little wasteful.
2. Use <meshPhysicalMaterial color="white" ref={useUpdate(m => m.setRGB(r,g,b), [r, g, b]} /> to get the color created once then updated each time the props change. This is efficient but seems like an awkward workaround.
3. Turn the color into an "rgb()" string in a useMemo, and use that in the prop. This seems like a middle option in both efficiency and awkward code.

I wonder if there might be some value in a couple of wrappers RGBColor and HSLColor, each of which would accept the appropriate three props, and could be used with attach (defaulting to attach="color" perhaps). They could live in drei and I suppose it would just be a way to keep more things within the props world and avoid the need for hooks for popular use-cases. They could even have props for sRGB conversion, to help out people with problems like this. I'm going to experiment with this in my own code and if there's appetite I'll make a PR for drei.

[drcmda]

why not

<meshBasicMaterial color="rgb(10, 20, 30)" />

?

there is no need to useMemo that, it won't recreate the color, and it will adhere to color management

[dangrabcad]

Well, it would have to be more like

<meshBasicMaterial color=`rgb(${r * 255}, ${g * 255}, ${b * 255})`

which is a bigger expression than I'd usually put directly in a prop, but you're right, it can be pulled out into the render function without needing a useMemo. Do you think that's the best way overall? I just don't like turning the floats into strings so they can be parsed into floats again, but meh, all Javascript is like that.

[stephencorwin]

It's a bit related, but for color adjustments, I use polished.js. It plays nicely with any css-in-js solution, but can also be leveraged when working with Three.js since it just performs transformations and returns a hex code or rgba value.

They have a bunch of utilities in the docs, but the color functions are the most applicable:
https://polished.js.org/docs/

[drcmda]

Do you think that's the best way overall?

i would do it like that at least. you can of course also usememo a real new THREE.Color() and operate on that.