Changing colours of all meshes and seperate meshes via tickbox

Questions
1

I’m facing a minor issue, with my project,

The project aims to change the colours of a models separate meshes using a colour picker from dat.gui,

I’m adding a dat.gui tick box where it sets the colour of all the meshes in the model to the colour of the main mesh,

I got this part to work, however… when unchecked and I try changing the separate mesh colours again, the colours of all the meshes are still changing with the main mesh colour.

Here is the relevant code:

    gui.add(Changeall, 'Set Primary to all colours').onChange(function(e){
        if(e === true)  { //or if e === true
            model.getObjectByName('Object_16').material.color = model.getObjectByName('Object_8').material.color;
            model.getObjectByName('Object_13').material.color = model.getObjectByName('Object_8').material.color;
            return;
                }
            else if (e === false) {
                return;
                // model.getObjectByName('Object_16').material.color.setHex(model.getObjectByName('Object_16').material.color);
                // model.getObjectByName('Object_13').material.color.setHex(model.getObjectByName('Object_13').material.color);
                // model.getObjectByName('Object_16').material.color === model.getObjectByName('Object_16').material.color;
                // model.getObjectByName('Object_13').material.color === model.getObjectByName('Object_13').material.color;
                // model.getObjectByName('Object_8').material.color === model.getObjectByName('Object_8').material.color;
                }
            });

and here is most of the code so you can see the full picture:

assetloader.load(car1Url.href, function(gltf) {
    const model = gltf.scene;
    scene.add(model);
    model.traverse(function(node){
        if(node.isMesh)
            node.castShadow = true;
    });
    model.scale.set(4, 4, 4);
    model.position.set(0, 0, -6);
    console.log(model);

    const primaryFolder = gui.addFolder('Primary Colour')

    primaryFolder.addColor(options, 'Primary Colour').onChange(function(e){
        model.getObjectByName('Object_8').material.color.setHex(e);
    });

    const detail1Folder = gui.addFolder('Secoundry Colour')

    detail1Folder.addColor(options, 'Secoundry Colour').onChange(function(e){
        model.getObjectByName('Object_16').material.color.setHex(e);
    });
    const detail2Folder = gui.addFolder('Detail Colour')

    detail2Folder.addColor(options, 'Detail Colour').onChange(function(e){
        model.getObjectByName('Object_13').material.color.setHex(e);
    });

    gui.add(Changeall, 'Set Primary to all colours').onChange(function(e){
        if(e === true)  { //or if e === true
            model.getObjectByName('Object_16').material.color = model.getObjectByName('Object_8').material.color;
            model.getObjectByName('Object_13').material.color = model.getObjectByName('Object_8').material.color;
            return;
                }
            else if (e === false) {
                return;
                // model.getObjectByName('Object_16').material.color.setHex(model.getObjectByName('Object_16').material.color);
                // model.getObjectByName('Object_13').material.color.setHex(model.getObjectByName('Object_13').material.color);
                // model.getObjectByName('Object_16').material.color === model.getObjectByName('Object_16').material.color;
                // model.getObjectByName('Object_13').material.color === model.getObjectByName('Object_13').material.color;
                // model.getObjectByName('Object_8').material.color === model.getObjectByName('Object_8').material.color;
                }
            }); 
});

const gui = new dat.GUI();

const Changeall = {
    'Set Primary to all colours': false
};

const options = {
    'Primary Colour': 0x7C7C7C,
    'Secoundry Colour': 0x7C7C7C,
    'Detail Colour': 0x7C7C7C,

Any help would be massively appreciated,

Thanks,

Alex

2

Try it this way:
model.getObjectByName('Object_16').material.color.copy(model.getObjectByName('Object_8').material.color);

1 Like
3

Thanks for this @prisoner849

I just put this in and it did work, so when the box is ticked It changes all colours to the colour set to object_8 mesh, however while the state of the tickbox is still ticked I can edit the other separate meshes colours well,

maybe there’s a way to disable the ability to change the colour of separate meshes when ticked but allow it when unticked?