three.js转换材料作为camaro材料

Question

我在three.js上测试了材质开关，并且看到了材质camaro ici：http://mrdoob.github.com/three.js/examples/webgl_materials_cars_camaro.html

但是，如果我认为理解代码，我会尝试使用具有单一材质的单个对象来重现它。然后单击按钮即可更改材质。但是我有两个问题：-如何创建带有纹理的材质变化-经过3天的测试，我的代码无法正常工作，我也不明白为什么如果您能告诉我它在哪里卡住以及原因：

/////////////////////// 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 );

}

}

感谢答案

Answer 1

此代码不正确

function createScene( geometry, materials ) {
    var m = new THREE.MeshLambertMaterial();
    m.materials  = Bmaterial [ "Orange" ];

    var mesh = new THREE.Mesh( geometry, m );

应该是

function createScene( geometry, materials ) {
    var m = Bmaterial [ "Orange" ];

    var mesh = new THREE.Mesh( geometry, m );

而且，您不能从较简单的材料更改为较复杂的材料。例如，如果一种材料具有纹理，则它们都必须。参见https://github.com/mrdoob/three.js/wiki/Updates。

因此，将所有材料放入材料阵列MeshPhongMaterial中。如果一种材料不需要纹理，则将其分配为虚拟的白色。