How to change material on runtime using OBJ/MTL Loader



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

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

                        if( == '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.


It should work…

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

You can test it this way:

//global vars
var geodesic;
geodesic = object; 

function runner(){
//change material



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:


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


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?