# How to set color attribution to GLTF model

**URL:** <https://discourse.threejs.org/t/how-to-set-color-attribution-to-gltf-model/25749>\
**Category:** Questions\
**Tags:** materials\
**Created:** [April 27, 2021, 2:48pm UTC](https://discourse.threejs.org/t/how-to-set-color-attribution-to-gltf-model/25749 "2021-04-27T14:48:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![one\_Two](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/one_two/32/16160_2.png) [@one\_Two](https://discourse.threejs.org/u/one_Two)\
**Post date:** [April 27, 2021, 2:48pm UTC](https://discourse.threejs.org/t/how-to-set-color-attribution-to-gltf-model/25749/1 "2021-04-27T14:48:05Z")

</div>

Hello, I am just a beginner of Three.js.  
I am trying to change material colors with mouse click and change it back to original colors with click again.  
I could change colors but could not find the way to store original colors as attribution of the group which gltf loader loads.  
I choose Float32Array to contain RGB info of each material has, but do not know how to attach it to the group.  
So, could anyone give ne any advise?

Here is my code:

```javascript
let materialColors;

gltfLoader.load(
"MiniCar.glb",
(glb) =>
{
    const sceneObject = glb.scene;
    const len = sceneObject.children[0].children.length;
    materialColors = new Float32Array(len * 3)

    for(let i=0; i < len; i++)
    {
        const i3 = i * 3;
        let colors = new Vector3;
        colors = sceneObject.children[0].children[i].material.color;

        materialColors[i3]= colors.r;
        materialColors[i3 + 1]= colors.g;
        materialColors[i3 + 2]= colors.b;
    }

    /// I would like to attach color attribution here

    scene.add(sceneObject);

});

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 27, 2021, 3:08pm UTC](https://discourse.threejs.org/t/how-to-set-color-attribution-to-gltf-model/25749/2 "2021-04-27T15:08:44Z")

</div>

How about storing the original color value in a custom property of [Material.userData](https://threejs.org/docs/index.html?q=material#api/en/materials/Material.userData)? In this way, you can easily connect the old color value with the respective material. So instead of using a typed array, you do this:

```javascript
const material = sceneObject.children[0].children[i].material;
material.userData.color = material.color.clone();

```

If you want to restore the color value, do this:

```javascript
material.color.copy( material.userData.color );

```

---

<div class="post-metadata">

**Author:** ![one\_Two](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/one_two/32/16160_2.png) [@one\_Two](https://discourse.threejs.org/u/one_Two)\
**Post date:** [April 28, 2021, 2:18am UTC](https://discourse.threejs.org/t/how-to-set-color-attribution-to-gltf-model/25749/3 "2021-04-28T02:18:37Z")

</div>

Mugen87  
Thank you for your quick respond. I really appreciate you!  
I did not even think to store data to each object. That is very simple and clear way.  
Have a good day!