MIX AssetBox - Color Configuration Source (ColorBox) [EN]

Dokumentation auf Deutsch


1. Prepare 3D models 


You need a 3D editing software with which you can create or edit 3D models. You are free to choose which software you want to use. Autodesk Maya was used in the following examples.

Editing your assets should be done in the following steps:

1.1. Consider in advance for which elements of your model you would like to dynamically offer a color selection in the app (here in the example a couch: cushion, seat, body and feet)

     1.1.1.Combine them into separate assemblies


     Cushion


     Seat


     Body and Feet

    


    1.1.2. Name these assemblies uniquely (you must reuse these names later).

   

    1.1.3. Group the individual elements

   

    1.1.4.Export this group e.g. as a .fbx file


2. Prepare your JSON for your assignment 


Example: 

{
"name": STRING,                                        // Name of the color configuration. Will not be displayed in the client.

"colorstages": [ COLOR_STAGE ]                         // The single areas painted with color.
}

COLOR_STAGE <-
{
     "name": STRING,                                   // The name of the "to be painted"-area. Will be displayed in the color picker.

     "elements": [ STRING ],                           // The labels of the 3D elements. Theses labels are used to find the colorable 
                                                       // elements in the 3D model and thus define the colorable area.

     "default_color": COLOR,                           // The default color for this area. This color doesn't appear in the color picker.    
                     
     "colors": [ COLOR ],                              // The colors, you can pick in the color picker.
                                              
     "color_categories":[ COLOR_CATEGORY ]             // The color categories in which the colors are divided into
}


COLOR_CATEGORY <-
{
     "name": STRING,                                   // The label of the color category, which will be displayed in the color picker.

     "colors": [ COLOR ]                               // The colors in this category.
}

COLOR <-
{
     "name": STRING,                                   // Label of the color. Will be displayed in the color picker.

     "color": STRING_HEXCOLOR,                         // The color, which will be displayed in the color picker.
 
     "colorDiffuse": STRING_HEXCOLOR,                  // Optional. Is used for the "diffuse"-portion of the 3D model. If not defined, the value of "color" will be used.

     "colorAmbient": STRING_HEXCOLOR,                  // Optional. Is used for the "ambient"-portion of the 3D model. If not defined, the value of "color" will be used.

     "colorSpecular": STRING_HEXCOLOR                  // Optional. Is used for the "specular"-portion of the 3D model. If not defined, the value of "color" will be used.
}

STRING_HEXCOLOR                	                       // The color value in hexadecimal form. For example "#52be80".



Example JSON: 

{
  "name": "Your 3D product's name",
  "colorstages": [
    {
      "name": "Your displayed label for this certain part of the product",
      "elements": [
        "The label of the part of the product, you specified for example in Maya"
      ],
      
       "colors": [
        {
          "name": "Label for the certain color",
          "color": "#32bc57",
          "colorDiffuse": "#32bc57",
          "colorAmbient": "#32bc57",
          "colorSpecular": "#32bc57"
        },
        {
          "name": "Your second defined color",
          "color": "#bc3232",
          "colorDiffuse": "#bc3232",
          "colorAmbient": "#bc3232",
          "colorSpecular": "#bc3232"
        },
        {
          "name": "Your third defined color",
          "color": "#327dbc",
          "colorDiffuse": "#327dbc",
          "colorAmbient": "#327dbc",
          "colorSpecular": "#327dbc"
        }
      ]
    }
  ]
}


3. Copy the code


4. Start the "MIX Manager" Application 


    4.1. Upload your created 3D model and select the "Edit" function for this model.

    4.2. Color Assignment with JSON 

        4.2.1. If you want to use the ColorBox with your 3D asset, you need to disable Mesh-Baking. 

             


       4.2.2. Enter the code of your JSON file in the field provided and complete the process by clicking on "Save".