How to set color attribution to GLTF model

Questions
1

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:

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);

});
2

How about storing the original color value in a custom property of 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:

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

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

material.color.copy( material.userData.color );
1 Like
3

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!