How to change material on runtime using OBJ/MTL Loader

Questions
, ,
1

I can`t change material on runtime I can change the materials while loading mesh/materials by MTLLoader.

objLoader.load( settings.OBJName + '.obj', function ( object ) {
                    
                    geodesic = object; // reference doesnt work outside the function

                    object.traverse(function(node) {
                        //node.geometry.computeVertexNormals();

                        if(node.material !== undefined) {           // przebieg po wszystkich obiektach MeshPhongMaterial
                            node.material.side = THREE.DoubleSide;
                            //console.log(node.material);

                        
                        if(node.material.name == 'tubes') {
                            node.material.shading = THREE.FlatShading;
                            node.material.shininess = 20;
                            node.material.reflectivity = 0.5;
                            

                            node.material.specular = new THREE.Color(0xffffff);
                        }
                        else if(node.material instanceof Array)     // przebieg po tablicach obiektow MeshPhongMaterial
                        {
                            
                            var arrayLen = node.material.length;
                            for(var i=0; i<arrayLen; i++) {
                                node.material[i].side = THREE.DoubleSide;
                            }
                        }
                    }

                     });

OK and how to change loaded materials on runtime ? Is there any way ? Refference object inside function is invisible outside the function.

1 Like
2

It should work…

You must be using the geodesic object before it is initialised.

You can test it this way:

//global vars
var geodesic;
....
objLoader.load(...
geodesic = object; 
);

function runner(){
if(geodesic){
//change material
}
};

runner();
3

Yes I know it should be work but it doesn`t work. Maybe local variable in function destroy reference to itself after the calling the function. I am not javascript expert :slight_smile:

4

So i couldn`t make it with global variable so I made two materials objects in global scope and I assigned them to materials in traverse function.

var tarpaulin1Material = new THREE.MeshPhongMaterial( {color: 0xFFFFFF, transparent: true, opacity: 1} );
var tarpaulin2Material = new THREE.MeshPhongMaterial( { color: 0x55CF, transparent: true, opacity: 0.6 });

and assigned in traverse function:

node.material[i].side = THREE.DoubleSide;
if(node.material[i].name == ‘Tarpaulin1’) {
node.material[i] = tarpaulin1Material;
}
if(node.material[i].name == ‘Tarpaulin2’) {
node.material[i] = tarpaulin2Material;
}

Now is OK

5

Maybe it was a timing problem? Maybe the object was not done loading, so geodesic had not been assigned yet when you were trying to reference it elsewhere?