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

three.js开关材料为camaro材料

1 个答案: