Hi, im trying to use the color swatch. I have a list of materia configured on the Threekit admin to applied on my model, but when I use the color-swatch component in the React Dev Kit. The buttons shows, but non the colors of the materials.
I need to do some configuration to show the colors?
Hi Luis, yes you will have to specify which colors you want to use. You can add metadata to the materials you are using, these key:value pairs should do the trick {_thumbnail: #hexCode}
Alternatively, you can achieve the same result on the front-end by giving the swatch a color value after determining which swatch it is.
Let me know if this is helpful or if I can give some more details!
Hi Will. I try the example you gave me, but still cannot see the tumbnail color.
I attached an image, let me know if something is missing.
I see - can you ensure that you have pulled the latest changes from the threekit directory in the react-threekit repo?
I just did a quick test - here you can see my materials:
Red
And my dev-kit app:
and here is how I set up my ColorSwatch component:
<ColorSwatch attribute="Color"/>
If you are up to date - can you show me your swatch component?
Thank you!
That’s cool. It’s working now.
Just one more question is possible to show a Preview of a texture like this?
I believe you will use the same metadata _thumbnail key with the value of the URL of the image. Can you try that and let me know?
I tried but it’s not working
Hello Luis , use swatch instead of color swatch
Swatch & ColorSwatch should both work with a URL @Luis_Locon can you post a screenshot of your metadata and how you are initializing the swatch?
Yeah for sure, if I use Swatch works perfectly but with Color Swatch shows a blank square
This is the config
<ColorSwatch attribute="Laminate Top" title=" " size="65px" />
I experience the same thing, I must have been mistaken. Please use Swatch for thumbnails and ColorSwatch for color thumbnails.
you can use the color swatch as Will stated but the format for the metadata you apply needs to be url('thumbnailUrl').
