three.js цвет объекта, а не текстура

Итак, чтобы сначала объяснить странное название, я пытаюсь сделать 3D-аватар для небольшого проекта, над которым я работаю, однако, когда я пытаюсь изменить цвет руки на аватаре, он на самом деле не меняет цвет с помощью текстуры на нем меняет цвет белой части (не прозрачной) текстуры, но там, где она прозрачная на текстуре показывает белый цвет с как бы без подсветки.

Перед окрашиванием:

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

После окраски:

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

Фактическую текстуру, которую я использую, можно найти здесь: https://imgur.com/SlnOxEw

Вот как я визуализирую текстуру:

var AvatarTexture = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('./images/Shirt/vest.png'), shininess: 80, shading: THREE.SmoothShading, alphaMap: 0x000000} );

и расцветка:

object.children[0].material.color.setHex(0xffcc66);
object.children[2].material.color.setHex(0xffcc66);
object.children[4].material.color.setHex(0xffcc66);

сам объект представляет собой UV-карту .obj, экспортированную из блендера. Это происходит, даже если текстура не имеет прозрачности.


colors three.js textures
person brandon cox    schedule 30.05.2016    source источник
comment
Вы меняете цвет всего материала. Смешение цвета. Но если вы смешаете белый цвет с цветом, результат будет другим, чем синее тело. Есть синий + желтый = зеленый.   -  person Martin    schedule 30.05.2016

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, в three.js конечный цвет — это произведение material.color и material.map по компонентам.

Поэтому, если вы измените material.color, окончательный цвет текстуры будет окрашен.

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

Чтобы предотвратить это, вам нужно иметь отдельный экземпляр материала для каждого меша.

material2 = material1.clone();

три.js р.77

person WestLangley    schedule 30.05.2016

arrow_upward
0
arrow_downward

Если вы хотите изменить цвет детали, то важен не объект, а материал var reference.

    //your solution as i understand question

var material1 = new THREE.MeshPhongMaterial( .. );

    var mesh1.material = material1;
    var mesh2.material = material1;

material1.color= red; // both meshes change color.


//solution:

var mesh1.material = new THREE.MeshPhongMaterial( .. );
var mesh2.material = new THREE.MeshPhongMaterial( .. );

//or

var material1 = new THREE.MeshPhongMaterial( .. );
var material2 = new THREE.MeshPhongMaterial( .. );

var mesh1.material = material1;
var mesh2.material = material2;
person Martin    schedule 30.05.2016
comment
Итак, как это меняет цвет деталей? Я попытался добавить его в MeshPhongMaterial, но он сделал то же самое. - person brandon cox; 30.05.2016
comment
Я не знаю, как ваша модель разделена, каково значение части, но да, если это левый дочерний элемент объекта с индексом = 0 (или т. д.), чем object.children[0].material.color .setHex(0xffcc66); применяется только к руке. Вы можете переключать материал по другой ссылке, отличной от сетки. например, material1.color.setHex(0xffcc66); тоже будет работать. - person Martin; 30.05.2016
comment
Проблема в том, что он окрашивает текстуру, а не сетку. Рука остается чисто-белой, независимо от цвета, который я делаю. Однако, если у меня на ней вообще нет текстуры, рука прокрашивается нормально, а не белая. - person brandon cox; 30.05.2016
comment
вы красите не сетку, а материал. Цвет текстуры рассчитывается по цвету материала. если вы хотите иметь материал только с цветом, а не с текстурой, удалите текстуру из mesh.material. Я думаю, вы плохо понимаете материальное поведение. См. поведение материалов при смешивании и прозрачности threejs.org/examples/webgl_materials_blending.html. - person Martin; 30.05.2016