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.
gals3
andgals3black
. Also, you don't really have to keep the result ofloader.load
– vincent