GSAP изменяет цвет материала модели GLTF, но нормализует RGB, что приводит к плохому цвету
Я работаю над R3F, я установил цвет материала «0x292929», и цвет отличный! Как я хочу!
if (modelModifier.color !== undefined) {
gsap.to(material.color, {
r: ((modelModifier.color >> 16) & 255) / 255,
g: ((modelModifier.color >> 8) & 255) / 255,
b: (modelModifier.color & 255) / 255,
duration: 1,
immediateRender: false
})
} else {
material.color.setHex(0x292929)
}
Но теперь, если я изменю цвет с помощью
modelModifier.color: 0xf64941,
Цвет не красный, а очень светлый белый/красный. Поэтому я перехожу обратно на
modelModifier.color: 0x292929,
И цвет материала не темный, а теперь очень светлый белый/серый.
Я думаю, это потому, что, конечно, я нормализую RGB на базе / 255, поэтому теперь 292929 на нормализованном RGB: 0,16, 0,16, 0,16 ... Хм, что я делаю неправильно? Я не могу нормализовать RGB, не имея нужного мне хорошего цвета? (Потому что шестнадцатеричный код 292929 в RGB обычно равен 41, 41, 41)
Спасибо за помощь ребята!
Я пытаюсь анимировать переход цвета от шестнадцатеричного к шестнадцатеричному, но GSAP это совсем не понравилось или есть какой-то плохой трюк. Итак, мне нужен нормализованный RGB или, может быть, простой RGB?
Ответы 1
Вы не упомянули цветовые пространства выше, но я думаю, что проблема скорее всего не в нормализации 0–1 или 0–255. В файле Three.js только шестнадцатеричные входные данные и строковые значения CSS считаются sRGB. Предполагается, что другие входные цвета находятся в рабочем цветовом пространстве (линейный sRGB), если не указано иное.
Предполагая, что ваши шестнадцатеричные входные данные для GSAP — это sRGB, выходные данные будут sRGB, и вам нужно сообщить Three.js, что предоставляемые вами компоненты RGB — это sRGB, например:
material.color.setRGB(r, g, b, THREE.SRGBColorSpace);
Возможно, это следует сделать в обратном вызове GSAP onUpdate.
три.js r152+
Спасибо! Хорошо, теперь я понимаю, что ThreeJS работает с LinearRGB, а не с пробелом RGB, как все мои данные, хорошо, приятно знать! Я финансирую простую функцию ThreeJS, которая преобразует мой цвет в линейное пространство: Material.color.convertSRGBToLinear() Спасибо, Дон, хорошего дня.