CODEWITHSUNDEEP
react-springreact-three-fiber
BronzeOtter
BronzeOtter

Reputation: 105

Colors flash black during a transition in react-three-fiber / react-spring

Geometry in my react-three-fiber scene will often momentarily flash black during a color transition (managed by react-spring) - when this happens, I notice errors like this in the console:

THREE.Color: Unknown color rgba(-1, 119, 189, 1)

How do I avoid these negative color values happening during transitions? I am setting up my color array like this:

const colors = ['hsl(202, 88%, 38%)', 'hsl(39,96%,43%)', 'hsl(28,87%,61%)', 'hsl(22,87%,60%)', 'hsl(45,96%,48%)', 'hsl(62,93%,66%)', 'hsl(60,14%,93%)'];

Thank you!

Upvotes: 0

Views: 382

Answers (1)

hpalu
hpalu

Reputation: 1435

this is due to value overlap, springs tend to overshoot and three seems to display black instead of just ignoring values beyond 256 and smaller than 0. you can specifically clamp color values. see: https://react-spring.io/common/configs

Upvotes: 1

Related Questions