1

我在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 );

}

}

感谢答案

4

1 回答 1

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。如果一种材质不需要纹理，则为其指定一个虚拟白色材质。

于 2012-12-29T06:03:52.837 回答