Changing Color of Threejs Cars Example on Runtime

Question

I have recently started playing around with Threejs cars example at below URL: https://threejs.org/examples/webgl_loader_ctm_materials.html

Fantastic piece to test realistic objects. I wanted to change materials for this car on runtime but I have been blocked due to the way that mesh is being added to the scene. I will appreciate someone can bail me out and post a fiddle or share code.

Here is how the mesh is added to the scene:

var loader = new THREE.CTMLoader();
                loader.loadParts( "catalog/view/javascript/models/ctm/camaro/camaro.js", function( geometries, materials ) {
                    hackMaterials( materials );
                    for ( var i = 0; i < geometries.length; i ++ ) {
                        var mesh = new THREE.Mesh( geometries[ i ], materials[ i ] );
                        mesh.position.copy( position );
                        mesh.scale.copy( scale );
                        scene.add( mesh );
                    }

Here is the hackMaterials(materials) function.

function hackMaterials( materials ) {
                for ( var i = 0; i < materials.length; i ++ ) {
                    var m = materials[ i ];
                    if ( m.name.indexOf( "Body" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial( );

                       mm.color.setHex( 0x56cc5b );   //
                        mm.lightMap = m.map;
                        //mm.envMap = textureCube;
                        mm.metalness = 0.5;
                        mm.roughness = 0.3;
                        materials[ i ] = mm;
                    } 
                    else if ( m.name.indexOf( "tire_car" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial();
                        mm.color.setHex( 0x000000 );
                        mm.lightMap = m.map;
                        mm.metalness = 0.1;
                        mm.roughness = 0.9;
                        materials[ i ] = mm;
                    }
                     else if ( m.name.indexOf( "mirror" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial();
                        mm.color.setHex( 0x808080 );
                        mm.lightMap = m.map;
                        mm.envMap = textureCube;
                        mm.metalness = 0.9;
                        mm.roughness = 0.5;
                        materials[ i ] = mm;
                    } 
                    else if ( m.name.indexOf( "glass" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial();
                        mm.color.copy( m.color );
//                      mm.lightMap = m.map;
                        mm.envMap = textureCube;
                        mm.metalness = 1;
                        mm.roughtness = 0.1;
                        mm.opacity = m.opacity;
                        mm.transparent = true;
                        materials[ i ] = mm;
                    } 
                    else if ( m.name.indexOf( "Material.001" ) !== -1 ) {
                        var mm = new THREE.MeshPhongMaterial( { map: m.map } );
                        mm.specularMap = m.map;
                        mm.shininess = 30;
                        mm.color.setHex( 0xffffff );
                        mm.metal = true;
                        materials[ i ] = mm;
                   }
                    materials[ i ].side = THREE.DoubleSide;
                }
            }

Needless to point out that function hackMaterials is looping through material names in an array and then based on the names, it is assigning different values for materials.

I have been trying to use dat.gui.js but only thing I have been able to do so far is to create a color control via this code and produce console output via below code:

var color = 0xffffff;

                     var params = {
                        modelcolor: "#ffffff"
                        };
                    var gui = new dat.GUI();
                    var folder = gui.addFolder('Model Colour');
                    folder.addColor(params, 'modelcolor')
                        .name('Model Color')
                        .onChange(function() {

                    //var mm = new THREE.MeshStandardMaterial( {color: params.modelcolor});
                    //alert(params.modelcolor)
                    color = params.modelcolor.replace("#", "0x");

                    //mm.color.setHex(0xdd5353);
                    console.log(color);
                    for ( var i = 0; i < geometries.length; i ++ ) {
                        //console.log(materials[i].name);
                        if (materials[i].name.indexOf("Plane") !== -1) {
                            materials[i].color.setHex(0x56cc5b);
                            console.log("color should be changed for " + materials[i].name);
                        }
                    }

It outputs the desired color code in console but does not apply it to the car. That will be of great help if someone could post even a basic working example with a drop down color changer.

Thanks in advance

Answer 1

In THREE.js, whenever you update a material and you want the effect to be updated across the scene, you need to set the following flag on the material:

material.needsUpdate = true;

Did this solve your problem or are there some other issues?