Color Swatch Behavior

Luis_Locon
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 colo…

Comments

12 comments

  • Comment author
    Luis_Locon

    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?

    0
  • Comment author
    William Thompson

    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!

    0
  • Comment author
    Luis_Locon

    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.

     

    0
  • Comment author
    William Thompson

    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


    Blue

    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!

    0
  • Comment author
    Luis_Locon

    That’s cool. It’s working now.

    Just one more question is possible to show a Preview of a texture like this?

    0
  • Comment author
    William Thompson

    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?

    0
  • Comment author
    Luis_Locon

    I tried but it’s not working

    0
  • Comment author
    Prashant

    Hello Luis , use swatch instead of color swatch

    0
  • Comment author
    William Thompson

    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?

    0
  • Comment author
    Luis_Locon

    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" />

    0
  • Comment author
    William Thompson

    I experience the same thing, I must have been mistaken. Please use Swatch for thumbnails and ColorSwatch for color thumbnails.

    0
  • Comment author
    Ian Drews

    you can use the color swatch as Will stated but the format for the metadata you apply needs to be url(’thumbnailUrl’).

    0

Please sign in to leave a comment.