1

three.js でマテリアル スイッチをテストし、マテリアル カマロ ici を見ました: http://mrdoob.github.com/three.js/examples/webgl_materials_cars_camaro.html

しかし、コードを理解していると思ったら、単一のマテリアルを持つ単一のオブジェクトで再現しようとし、ボタンをクリックするとマテリアルが変更されます。しかし、私には 2 つの問題があります: - テクスチャを使用してマテリアルのバリエーションを作成する方法 - 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 );

また、それほど複雑でない素材からより複雑な素材に変更することはできません。たとえば、1つのマテリアルにテクスチャがある場合、それらはすべて必須です。https://github.com/mrdoob/three.js/wiki/Updatesを参照してください。

したがって、すべてのマテリアルをマテリアル配列に作成しますMeshPhongMaterial。1つのマテリアルにテクスチャが必要ない場合は、ダミーの白いマテリアルを割り当てます。

于 2012-12-29T06:03:52.837 に答える