From 1bb5b95146be76ed06a92498c8d17d5ac767304f Mon Sep 17 00:00:00 2001
From: Luke Horvat <lukehorvat@gmail.com>
Date: Sat, 15 Jun 2024 22:33:05 +0200
Subject: [PATCH] feat(GradientTexture): support any color representation in
 GradientTexture (#1993)

---
 src/core/GradientTexture.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/core/GradientTexture.tsx b/src/core/GradientTexture.tsx
index 9168a3201..a8a313390 100644
--- a/src/core/GradientTexture.tsx
+++ b/src/core/GradientTexture.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { useThree } from '@react-three/fiber'
+import * as THREE from 'three'
+
 export enum GradientType {
   Linear = 'linear',
   Radial = 'radial',
@@ -7,7 +9,7 @@ export enum GradientType {
 
 type Props = {
   stops: Array<number>
-  colors: Array<string>
+  colors: Array<THREE.ColorRepresentation>
   attach?: string
   size?: number
   width?: number
@@ -53,9 +55,10 @@ export function GradientTexture({
       )
     }
 
+    const tempColor = new THREE.Color() // reuse instance for performance
     let i = stops.length
     while (i--) {
-      gradient.addColorStop(stops[i], colors[i])
+      gradient.addColorStop(stops[i], tempColor.set(colors[i]).getStyle())
     }
     context.save()
     context.fillStyle = gradient