three.js Different materials on each object

Question

I'm extremely new to three.js and javascript. And I'm looking to create a scene with different objects, each object has its own material which later I will program to be modifiable through a GUI. I'm coming across the problem that my objects render successfully but they both retain the same material, they don't each get their own.

Here is my code for the rendering of the objects and the materials:

    var jsonLoader = new THREE.JSONLoader();
var gals3 = jsonLoader.load( "model/galmodel.js", addModelToScene );
var gals3black = jsonLoader.load( "model/galaxys3.js", addModelToScene );


}   

function addModelToScene(gals3) 
{

var gals3Material = new THREE.MeshPhongMaterial( { map:     THREE.ImageUtils.loadTexture('images/galaxys3_white_diffuse.png') } );
gals3 = new THREE.Mesh(gals3, gals3Material );
gals3.scale.set(10,10,10);
scene.add( gals3 );
}


function addModelToScene(gals3black) 
{
var gals3blackMaterial = new THREE.MeshPhongMaterial( { map:   THREE.ImageUtils.loadTexture('images/galaxys3_black_diffuse.png') } );
gals3black = new THREE.Mesh(gals3black, gals3blackMaterial );
gals3black.scale.set(10,10,10);
scene.add( gals3black );
}

With the code above I'm rendering the objects properly but they both retain the "gals3black" material. I would like the code to be easily to later program into a GUI to change the texture maps. Any help is appreciated. Sorry for the poor formatting and explanations. I'm new to this and doing it as a hobby.

Thank you for your help in advance.

Answer 1

You have defined the function addModelToScene twice, so the second definition will override the first and that's the function you're calling. As a result you're also assigning gals3blackMaterial's texture to both.

Instead, you can define a single function addModelToScene and pass the name of texture to be used as a parameter as well.