Updating three.js texture throughthe dat.gui dropdown

Question

I have loaded different textures using textureLoader and I am trying to update them using dat.gui controls.

Why is the code below not working?

gui.add(mesh.position, "y", -1, 1, 0.1);
gui.add(mesh.material, "map", { alpha: alphaTexture, color: colorTexture, normal: normalTexture })
    .onChange(() => {
        mesh.material.needsUpdate = true;
        console.log("updated");
    });

It gives this error:

"Uncaught TypeError: m is undefined" [error][1]

Answer 1

After some tweaking, I found that the values of object(or array) in the third argument only supports string types, so passing a object as a value would not work.

This is the closest workaround that I could think of..

/* GUI options */
const guiOptions = {
    mesh_material_map: "color",
};

/* Textures */
const textureLoader = new THREE.TextureLoader(loadingManager);
const colorTexture = textureLoader.load("/textures/door/color.jpg");
const alphaTexture = textureLoader.load("/textures/door/alpha.jpg");
const normalTexture = textureLoader.load("/textures/door/normal.jpg");

const guiTextureHash = {
    color: colorTexture,
    alpha: alphaTexture,
    normal: normalTexture,
};

/* Add to gui */
gui.add(guiOptions, "mesh_material_map", Object.keys(guiTextureHash)).onChange((value) => {
    mesh.material.map = guiTextureHash[value];
    mesh.needsUpdate = true;
    console.log("updated", value);
});

Answer 2

I found your topic looking for a texture picker. It's probably a little away from your starting point but could help some other. I finally made a simple texture picker with a dropdown selection key with dat.gui. The goal is to be able to change on the fly my matcap texture, going through an array of loaded texture.

const gui = new dat.GUI()
const textureLoader = new THREE.TextureLoader()
const myMatCap = [
    textureLoader.load('./textures/matcaps/1.png'),
    textureLoader.load('./textures/matcaps/2.png'),
    textureLoader.load('./textures/matcaps/3.png')
]

const parameters = {
    color: 0xff0000,
    matCapTexture: 0
}
const updateAllMaterials = () => {
    scene.traverse( (child)=>{
        if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshMatcapMaterial) {
            child.material.matcap = myMatCap[ parameters.matCapTexture]
            child.material.needsUpdate = true
        }
    })
}
gui.add(parameters, 'matCapTexture', {
    terracotta: 0,
    grey: 1,
    chrome: 2,
}).onFinishChange(()=>{
    updateAllMaterials()
})

let mesh = new THREE.Mesh( 
    geometry, 
    new THREE.MeshMatcapMaterial({ 
        side: THREE.DoubleSide, 
        matcap: myMatCap[ parameters.matCapTexture ]
    })
);
scene.add(mesh)