three.js switch materials as camaro materials - function

Question

I test the material switch on three.js and I have seen material camaro ici :
http://mrdoob.github.com/three.js/examples/webgl_materials_cars_camaro.html
But if I think understand the code, I tried to reproduce it with a single object that has a single material
and clicking on the button changes the material.
But I have two problems:
- How to create a variation of material with a texture
- After 3 days of testing, my code does not work and I do not understand why
if you could tell me where it gets stuck and why:
/////////////////////// MATERIAL /////////////////////////////
var materials = {
Red: new THREE.MeshLambertMaterial( {
color: 0x660000,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.5
} ),
Black: new THREE.MeshLambertMaterial( {
color: 0x000000,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.5
} ),
White: new THREE.MeshLambertMaterial( {
color: 0xffffff,
envMap: textureCube,
combine: THREE.MixOperation,
reflectivity: 0.5
} ),
Gold: new THREE.MeshPhongMaterial( {
color: 0xaa9944,
specular: 0xbbaa99,
shininess: 50,
envMap: textureCube,
combine: THREE.MultiplyOperation
} ),
Chrome: new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0xffffff,
envMap: textureCube,
combine: THREE.MultiplyOperation
} ),
// how to configure this material ?
/*LWood: new THREE.ImageUtils.loadTexture ( texture );
url = "models/macabann/chataigner.jpg";
imgTexture.repeat.set( 4, 4 );
imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
imgTexture.anisotropy = 16;
shininess: 50;
specular: 0x333333;
envMap: textureCube;
combine: THREE.MixOperation;
reflectivity: 0.2;
bumpScale: 1;
shading: THREE.SmoothShading;*/
/*DWood: new THREE.ImageUtils.loadTexture ( texture );
url = "models/macabann/chataigner.jpg";
imgTexture.repeat.set( 4, 4 );
imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
imgTexture.anisotropy = 16;
shininess: 50;
specular: 0x333333;
envMap: textureCube;
combine: THREE.MixOperation;
reflectivity: 0.2;
bumpScale: 0;
shading: THREE.SmoothShading;*/
};
/////////////////////// FIN MATERIAL /////////////////////////////
////////////////////////// OBJET ////////////////////////////
var loader = new THREE.JSONLoader();
loader.load('models/macabann/bielo.js', function ( geometry )
{ createScene( geometry, materials ) }
);
function createScene( geometry, materials ) {
var Bmaterial = new THREE.MeshLambertMaterial();
Bmaterial = materials [ "Orange" ];// default cette ligne merde
var mesh = new THREE.Mesh( geometry, Bmaterial );
mesh.scale.set(1, 1, 1);
mesh.position.y = 0;
mesh.position.x = 0;
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add( mesh );
createButtons( materials, Bmaterial );
}
///////////////////// FIN OBJET ///////////////////////
//////////////////// buttons //////////////////////////
function createButtons( materials, Bmaterial ) {
var buttons = document.getElementById( "buttons" );
for ( var key in materials ) {
var button = document.createElement( 'button' );
button.textContent = key;
button.addEventListener( 'click', function ( event ) {
Bmaterial = materials[ this.textContent ];///////problem ?
}, false
);
buttons.appendChild( button );
}
}
thanks to answers

Answer 1

This code is incorrect
function createScene( geometry, materials ) {
var m = new THREE.MeshLambertMaterial();
m.materials = Bmaterial [ "Orange" ];
var mesh = new THREE.Mesh( geometry, m );
It should be
function createScene( geometry, materials ) {
var m = Bmaterial [ "Orange" ];
var mesh = new THREE.Mesh( geometry, m );
Also, you can't change from a less complicated material to a more complicated one. For example, if one material has a texture, they all must. See https://github.com/mrdoob/three.js/wiki/Updates.
So make all your materials in you material array MeshPhongMaterial. If one material does not need a texture, then assign it a dummy white one.