Невозможно изменить цвет материала THREE.Mesh, существующего в сцене во время выполнения.

Я уже добавил сетку в сцену. Я пытаюсь изменить цвет материала. Изменение цвета происходит через цветовую палитру из меню. Используя этот плагин jQuery: http://colpick.com/plugin

Я знаю, что эта цветовая палитра может отправлять мне значения HSB, но я использую следующую функцию из этого плагина:

$.colpick.hsbToHex(hsb)

Он возвращает строку, а не значение int:

$.colpick.hsbToHex(hsb) Получает объект вида {h:0, s:100, b:100} и возвращает соответствующую HEX-строку (без #).

Здесь я вызываю функцию для изменения цвета сетки:

var buttonColorPicker = document.getElementById( 'color-palette-button' );
buttonColorPicker.onclick = function( sender ) {
    this.changeColorForActiveMesh( this.temporary.colorPicker )
}.bind( this );

Вот функция изменения материала:

// Note: colorHex isn't an Int, it's a string in this case
// that's why I'm converting a string to the RGB object
// with the following bit shifting to get an actual Int representation
GC3D.Utils.prototype.changeColorForActiveMesh = function( colorHex ) {
    this.scene.children.forEach(function( item ) {
        if ( item instanceof THREE.Mesh ) {
            var rgbObject = this.convertHexToRgb( colorHex );
            var rgbInt = ( ( rgbObject.red & 0x0ff ) << 16 )
                         | ( ( rgbObject.green & 0x0ff ) << 8 )
                         | ( rgbObject.blue & 0x0ff );
            item.material.color.setHex( rgbInt );
        }
    }.bind( this ));
};

Здесь я подготовил функцию для преобразования из шестнадцатеричного в объект RGB:

GC3D.Utils.prototype.convertHexToRgb = function( hex ) {
    var rgbObject = /^0x?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return rgbObject ? {
        red: parseInt( rgbObject[1], 16 ),
        green: parseInt( rgbObject[2], 16 ),
        blue: parseInt( rgbObject[3], 16 )
    } : undefined;
};

В регулярном выражении есть часть /^0x?, потому что я сохраняю преобразованное шестнадцатеричное значение из плагина jQuery в некоторые временные значения.

Доказательство:

введите здесь описание изображения

Я также пытался провести тест здесь: http://www.shodor.org/stella2java/rgbint.html Проверить, насколько корректно считает конечный Int моя функция, но, вроде бы, все нормально. Так что же неправильно? Может есть другой способ изменить цвет в THREE.JS?

ОБНОВЛЕНИЕ №1:

Я изменил тип материала с MeshLambert на MeshBasic, и теперь палитра правильно меняет цвет! Но это не решение этой проблемы, мне все еще интересно, почему MeshLambert плохо работает в моем коде... Я пытался установить разные значения окружения/цвета, но это работает очень странно...

Например:

new THREE.MeshLambertMaterial({
        color: 0xff00ff,
        ambient: 0x167aff,
        wireframe: false
});

Он отображается как красный:

введите здесь описание изображения

Но 0xff00ff это: введите здесь описание изображенияА 0x167aff это:

Как это могло быть красным?


javascript colors hex three.js rgb
person Community    schedule 04.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Судя по снимку экрана, вы правильно получаете шестнадцатеричное значение.

Вы можете просто установить цвет материала, используя функцию setHex напрямую.

поэтому код внутри условия if (тот, что в строке 741) будет примерно таким

if ( item instanceof THREE.Mesh ) {
        item.material.ambient.setHex(colorHex);// sets the ambient color

        item.material.color.setHex(colorHex);// sets the diffused color

   }
person Shiva    schedule 04.03.2014
comment
Где именно неправильно? Палитра показывает шестнадцатеричное значение, как в аргументе функции colorHex, вы можете посетить сайт: shodor .org/stella2java/rgbint.html, когда я попробовал цвет, который находится в палитре (поскольку цвет, который вы видите на экране, и его код такой же, как на этом веб-сайте, пожалуйста, посмотрите на другом экране: s28.postimg.org/6phagclkd/image.png), а также Самое смешное, что я пробовал статически установить собственный цвет для теста: item.material.color.setHex( 0x0044FF ); она такая синяя, она не становится синей, она становится зеленой?! - person ; 04.03.2014
comment
@GeloVolro: что мне кажется неправильным, так это молния в твоей голове. т.е. если у вас есть желтый цвет в сцене, синий материал будет казаться зеленым, и это похоже на то, что вы упомянули в своем обновленном вопросе. так что просто добавьте окружающий белый свет в сцену и удалите все остальные источники света, и проверьте - person Shiva; 05.03.2014
comment
также, если вы можете предоставить jsfiddle или подобное, это было бы полезно. - person Shiva; 05.03.2014