Как предотвратить изменение базового цвета при наложении узоров? ⇐ Javascript

[Anonymous]

Я создаю собственный настройщик гоночного шелка, используя THREE.js. Мое приложение позволяет пользователям:
Кстати, это что-то вроде этого веб-сайта: https://hylandsportswear.com/kitbuilder ... ketIndex=1
мой — всего лишь 2d модель и использует палитру цветов.
Выберите базовый цвет.
Примените узор (например, полосы, клетку, сердце).
Отрегулируйте цвет узора.
Отрегулируйте базовый цвет после применения узора.
Изменения цвета выполняются с помощью палитры цветов.
Однако я столкнулся с проблемой, из-за которой кажется, что базовый цвет меняется при применении узора.
Проблема
Ожидаемое поведение: базовый цвет остается точно таким, как выбран (например, #ff3370), а узор просто наложено на наверху.
Фактическое поведение: при нанесении узора видимый базовый цвет меняется (например, с розового на красный; по какой-то причине он всегда становится темнее, чем предполагаемый цвет, но с основными цветами такой проблемы нет. ), хотя шестнадцатеричный код остается неизменным. При переключении обратно на «сплошной» базовый цвет отображается правильно.
Моя настройка включает в себя следующее:
Базовый цвет: выбирается пользователем с помощью HTML.
Шаблон : прозрачный PNG (например, черное сердце с прозрачным фоном). (для его создания использовался gimp).
ShaderMaterial: используется для наложения узора на базовый цвет.
Я пробовал настроить фрагментный шейдер и вершинный шейдер, я также убедился мой образец не является проблемой. У него полностью прозрачный фон (непрозрачность 0), а затем узор (непрозрачность 1 и черный цвет).
это мой код для отображения узора поверх основы .
const updateMaterials = () => {
if (!silkModel) return;
const sections = [
{ name: "jacketmaterial", colorId: "jacketColor", patternId: "jacketPattern", patternColorId: "jacketPatternColor" },
{ name: "lsleevematerial", colorId: "sleevesColor", patternId: "sleevesPattern", patternColorId: "sleevesPatternColor" },
{ name: "rsleevematerial", colorId: "sleevesColor", patternId: "sleevesPattern", patternColorId: "sleevesPatternColor" },
{ name: "capmaterial", colorId: "capColor", patternId: "capPattern", patternColorId: "capPatternColor" },
];

sections.forEach(({ name, colorId, patternId, patternColorId }) => {
const baseColorValue = document.getElementById(colorId)?.value || "#ffffff";
const patternColorValue = document.getElementById(patternColorId)?.value || "#ffffff";
const selectedPattern = document.getElementById(patternId)?.value || "solid";

const baseColor = new THREE.Color(baseColorValue);
const patternColor = new THREE.Color(patternColorValue);

silkModel.traverse((child) => {
if (child.isMesh && child.material && child.material.name === name) {
console.log("Updating material for:", name);
console.log("Base Color:", baseColorValue);
console.log("Pattern Color:", patternColorValue);
console.log("Selected Pattern:", selectedPattern);

let texture =
selectedPattern === "custom" ? customPatterns.current[name] : patterns[selectedPattern];

console.log("Texture Info:", texture);

if (!texture || selectedPattern === "solid") {
child.material = new THREE.MeshStandardMaterial({
color: baseColor,
emissive: baseColor,
emissiveIntensity: 0.5,
side: THREE.DoubleSide,
name: child.material.name,
});
} else {
child.material = new THREE.ShaderMaterial({
uniforms: {
baseColor: { value: baseColor },
patternColor: { value: patternColor },
patternTexture: { value: texture },
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 baseColor;
uniform vec3 patternColor;
uniform sampler2D patternTexture;
varying vec2 vUv;

void main() {
vec4 texelColor = texture2D(patternTexture, vUv);
float alpha = texelColor.a; // Transparency of the pattern

// If alpha is 0, use the base color only. If alpha > 0, blend the pattern color.
vec3 outputColor = mix(baseColor, patternColor, alpha);

gl_FragColor = vec4(outputColor, 1.0);
}
`,

side: THREE.DoubleSide,
transparent: true, // Ensures blending with the base color
name: child.material.name,
});

}
child.material.needsUpdate = true;
}
});
});

};
heart: textureLoader.load("/textures/black_heart_pattern.png", (texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
texture.flipY = false;
}),


Подробнее здесь: https://stackoverflow.com/questions/793 ... g-patterns