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!
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