материалы переключателя three.js как материалы camaro

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

Но если я думаю, что понимаю код, я попытался воспроизвести его с помощью одного объекта, который имеет один материал и нажатие на кнопку изменяет материал. Но у меня две проблемы: - Как создать вариацию материала с текстурой - После 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 );

}

}

благодаря ответам

1
nl ja de

2 ответы

Этот код некорректен

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 . Если одному материалу не нужна текстура, тогда назначьте его фиктивным белым.

1
добавлено
То, что вы пытаетесь сделать, должно работать с моими предложениями. Если он не работает, укажите ссылку на живой пример вашего кода. Обязательно используйте three.js r.54.
добавлено автор WestLangley, источник
ОК, вот рабочий код: pastebin.com/990mi6td . Я удалил часть кода, чтобы я мог обнять его. Вам придется сбросить исходные пути к файлам. Не забудьте принять этот ответ, нажав на галочку. Спасибо.
добавлено автор WestLangley, источник
Я взял skybox, чтобы упростить код, чтобы легче понять его. Вы можете поместить skybox обратно, если хотите, но учитесь на официальных примерах three.js, а не на старых примерах из сети. Удачи!
добавлено автор WestLangley, источник
И три.js, и three.min.js должны давать одинаковый результат. Убедитесь, что вы используете идентичные версии.
добавлено автор WestLangley, источник
Спасибо за ответ ... для этого я нашел решение этой ночью. Объект objet и default хороши ... мои кнопки имеют хорошее имя, но когда я clic, объект не берет новый материал ... Если я понимаю вас, невозможно применить материал или текстуру в на той же странице?
добавлено автор Laurane Bernard, источник
Спасибо большое. это okey с three.js - для информации, которую я тестировал с помощью three.min.js, и текстура skybox не отображается. Я многому научился там, но это значит, что примеры кода устарели?
добавлено автор Laurane Bernard, источник
да, я видел. Я понял, что вы сняли skybox, но это только текстуры skybox, которые не отображаются с тремя.min.js, тогда они отображаются с помощью three.js ... это только для информации ...
добавлено автор Laurane Bernard, источник
да, сейчас идет ... плохая версия
добавлено автор Laurane Bernard, источник

Этот код некорректен

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 . Если одному материалу не нужна текстура, тогда назначьте его фиктивным белым.

1
добавлено
То, что вы пытаетесь сделать, должно работать с моими предложениями. Если он не работает, укажите ссылку на живой пример вашего кода. Обязательно используйте three.js r.54.
добавлено автор WestLangley, источник
ОК, вот рабочий код: pastebin.com/990mi6td . Я удалил часть кода, чтобы я мог обнять его. Вам придется сбросить исходные пути к файлам. Не забудьте принять этот ответ, нажав на галочку. Спасибо.
добавлено автор WestLangley, источник
Я взял skybox, чтобы упростить код, чтобы легче понять его. Вы можете поместить skybox обратно, если хотите, но учитесь на официальных примерах three.js, а не на старых примерах из сети. Удачи!
добавлено автор WestLangley, источник
И три.js, и three.min.js должны давать одинаковый результат. Убедитесь, что вы используете идентичные версии.
добавлено автор WestLangley, источник
Спасибо за ответ ... для этого я нашел решение этой ночью. Объект objet и default хороши ... мои кнопки имеют хорошее имя, но когда я clic, объект не берет новый материал ... Если я понимаю вас, невозможно применить материал или текстуру в на той же странице?
добавлено автор Laurane Bernard, источник
Спасибо большое. это okey с three.js - для информации, которую я тестировал с помощью three.min.js, и текстура skybox не отображается. Я многому научился там, но это значит, что примеры кода устарели?
добавлено автор Laurane Bernard, источник
да, я видел. Я понял, что вы сняли skybox, но это только текстуры skybox, которые не отображаются с тремя.min.js, тогда они отображаются с помощью three.js ... это только для информации ...
добавлено автор Laurane Bernard, источник
да, сейчас идет ... плохая версия
добавлено автор Laurane Bernard, источник