refactor: Create single utility type to encapsulate color argument

.all-contributorsrc

@@ -196,6 +196,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "shuta13",
+      "name": "Shuta Hirai",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38882716?v=4",
+      "profile": "https://studio.did0es.me/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "skipCi": true,

README.md

@@ -50,6 +50,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/Jazcash"><img src="https://avatars.githubusercontent.com/u/1434248?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jazcash</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=Jazcash" title="Code">💻</a></td>
     <td align="center"><a href="https://bjornstar.com/"><img src="https://avatars.githubusercontent.com/u/20630?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bjorn Stromberg</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=bjornstar" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/happy-turtle"><img src="https://avatars.githubusercontent.com/u/18415215?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HappyTurtle</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=happy-turtle" title="Code">💻</a></td>
+    <td align="center"><a href="https://studio.did0es.me/"><img src="https://avatars.githubusercontent.com/u/38882716?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shuta Hirai</b></sub></a><br /><a href="https://github.com/three-types/three-ts-types/commits?author=shuta13" title="Code">💻</a></td>
   </tr>
 </table>
 

types/three/examples/jsm/helpers/RectAreaLightHelper.d.ts

@@ -1,10 +1,10 @@
-import { Color, Line, RectAreaLight } from '../../../src/Three';
+import { Line, RectAreaLight, ColorRepresentation } from '../../../src/Three';
 
 export class RectAreaLightHelper extends Line {
-    constructor(light: RectAreaLight, color?: Color | string | number);
+    constructor(light: RectAreaLight, color?: ColorRepresentation);
 
     light: RectAreaLight;
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
 
     dispose(): void;
 }

types/three/examples/jsm/nodes/inputs/ColorNode.d.ts

@@ -4,7 +4,7 @@ import { InputNode } from '../core/InputNode';
 import { NodeBuilder } from '../core/NodeBuilder';
 
 export class ColorNode extends InputNode {
-    constructor(color: Color | number | string, g?: number, b?: number);
+    constructor(color: ColorRepresentation, g?: number, b?: number);
 
     value: Color;
     nodeType: string;

types/three/examples/jsm/objects/Water.d.ts

@@ -1,4 +1,4 @@
-import { BufferGeometry, Color, Mesh, Side, Texture, Vector3 } from '../../../src/Three';
+import { BufferGeometry, ColorRepresentation, Mesh, Side, Texture, Vector3 } from '../../../src/Three';
 
 export interface WaterOptions {
     textureWidth?: number;
@@ -8,8 +8,8 @@ export interface WaterOptions {
     time?: number;
     waterNormals?: Texture;
     sunDirection?: Vector3;
-    sunColor?: Color | string | number;
-    waterColor?: Color | string | number;
+    sunColor?: ColorRepresentation;
+    waterColor?: ColorRepresentation;
     eye?: Vector3;
     distortionScale?: number;
     side?: Side;

types/three/examples/jsm/objects/Water2.d.ts

@@ -1,7 +1,7 @@
-import { BufferGeometry, Color, Mesh, Texture, TextureEncoding, Vector2 } from '../../../src/Three';
+import { BufferGeometry, ColorRepresentation, Mesh, Texture, TextureEncoding, Vector2 } from '../../../src/Three';
 
 export interface Water2Options {
-    color?: Color | string | number;
+    color?: ColorRepresentation;
     textureWidth?: number;
     textureHeight?: number;
     clipBias?: number;

types/three/examples/jsm/postprocessing/ClearPass.d.ts

@@ -1,9 +1,9 @@
-import { Color } from '../../../src/Three';
+import { ColorRepresentation } from '../../../src/Three';
 
 import { Pass } from './Pass';
 
 export class ClearPass extends Pass {
-    constructor(clearColor?: Color | string | number, clearAlpha?: number);
-    clearColor: Color | string | number;
+    constructor(clearColor?: ColorRepresentation, clearAlpha?: number);
+    clearColor: ColorRepresentation;
     clearAlpha: number;
 }

types/three/examples/jsm/postprocessing/SAOPass.d.ts

@@ -9,6 +9,7 @@ import {
     Vector2,
     WebGLRenderer,
     WebGLRenderTarget,
+    ColorRepresentation,
 } from '../../../src/Three';
 
 import { Pass } from './Pass';
@@ -65,14 +66,14 @@ export class SAOPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
     renderOverride(
         renderer: WebGLRenderer,
         overrideMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
 }

types/three/examples/jsm/postprocessing/SSAARenderPass.d.ts

@@ -1,14 +1,14 @@
-import { Scene, Camera, Color, ShaderMaterial, WebGLRenderTarget } from '../../../src/Three';
+import { Scene, Camera, ColorRepresentation, ShaderMaterial, WebGLRenderTarget } from '../../../src/Three';
 
 import { Pass } from './Pass';
 
 export class SSAARenderPass extends Pass {
-    constructor(scene: Scene, camera: Camera, clearColor: Color | string | number, clearAlpha: number);
+    constructor(scene: Scene, camera: Camera, clearColor: ColorRepresentation, clearAlpha: number);
     scene: Scene;
     camera: Camera;
     sampleLevel: number;
     unbiased: boolean;
-    clearColor: Color | string | number;
+    clearColor: ColorRepresentation;
     clearAlpha: number;
     copyUniforms: object;
     copyMaterial: ShaderMaterial;

types/three/examples/jsm/postprocessing/SSAOPass.d.ts

@@ -9,6 +9,7 @@ import {
     Vector3,
     WebGLRenderer,
     WebGLRenderTarget,
+    ColorRepresentation,
 } from '../../../src/Three';
 
 import { Pass } from './Pass';
@@ -57,14 +58,14 @@ export class SSAOPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
     renderOverride(
         renderer: WebGLRenderer,
         overrideMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor?: Color | string | number,
+        clearColor?: ColorRepresentation,
         clearAlpha?: number,
     ): void;
 }

types/three/examples/jsm/postprocessing/SSRPass.d.ts

@@ -10,6 +10,7 @@ import {
     TextureEncoding,
     Mesh,
     Material,
+    ColorRepresentation,
 } from '../../../src/Three';
 import { Pass, FullScreenQuad } from '../postprocessing/Pass';
 import { Reflector } from '../objects/ReflectorForSSRPass';
@@ -105,23 +106,23 @@ export class SSRPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderOverride: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderMetalness: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 }

types/three/examples/jsm/postprocessing/SSRrPass.d.ts

@@ -22,6 +22,7 @@ import {
     Mesh,
     TextureEncoding,
     Material,
+    ColorRepresentation,
 } from '../../../src/Three';
 import { Pass, FullScreenQuad } from './Pass';
 import { SSRrShader, SSRrDepthShader } from '../shaders/SSRrShader';
@@ -101,24 +102,24 @@ export class SSRrPass extends Pass {
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderOverride: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     renderRefractive: (
         renderer: WebGLRenderer,
         passMaterial: Material,
         renderTarget: WebGLRenderTarget,
-        clearColor: Color | string | number,
-        clearAlpha: Color | string | number,
+        clearColor: ColorRepresentation,
+        clearAlpha: ColorRepresentation,
     ) => void;
 
     setSize: (width: number, height: number) => void;

types/three/examples/jsm/postprocessing/TAARenderPass.d.ts

@@ -1,8 +1,8 @@
-import { Scene, Camera, Color } from '../../../src/Three';
+import { Scene, Camera, ColorRepresentation } from '../../../src/Three';
 
 import { SSAARenderPass } from './SSAARenderPass';
 
 export class TAARenderPass extends SSAARenderPass {
-    constructor(scene: Scene, camera: Camera, clearColor: Color | string | number, clearAlpha: number);
+    constructor(scene: Scene, camera: Camera, clearColor: ColorRepresentation, clearAlpha: number);
     accumulate: boolean;
 }

types/three/src/Three.d.ts

@@ -3,6 +3,7 @@
  */
 export * from './constants';
 export * from './Three.Legacy';
+export * from './utils';
 /**
  * Animation
  */

types/three/src/helpers/ArrowHelper.d.ts

@@ -1,8 +1,8 @@
 import { Vector3 } from './../math/Vector3';
 import { Line } from './../objects/Line';
 import { Mesh } from './../objects/Mesh';
-import { Color } from './../math/Color';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 // Extras / Helpers /////////////////////////////////////////////////////////////////////
 
@@ -19,7 +19,7 @@ export class ArrowHelper extends Object3D {
         dir?: Vector3,
         origin?: Vector3,
         length?: number,
-        color?: Color | string | number,
+        color?: ColorRepresentation,
         headLength?: number,
         headWidth?: number,
     );
@@ -54,5 +54,5 @@ export class ArrowHelper extends Object3D {
     /**
      * @param color The desired color.
      */
-    setColor(color: Color | string | number): void;
+    setColor(color: ColorRepresentation): void;
 }

types/three/src/helpers/BoxHelper.d.ts

@@ -1,13 +1,13 @@
+import { ColorRepresentation } from '../utils';
 import { Object3D } from './../core/Object3D';
-import { Color } from './../math/Color';
 import { LineSegments } from './../objects/LineSegments';
 
 export class BoxHelper extends LineSegments {
     /**
      * @param object
      * @param [color=0xffff00]
      */
-    constructor(object: Object3D, color?: Color | string | number);
+    constructor(object: Object3D, color?: ColorRepresentation);
 
     /**
      * @default 'BoxHelper'

types/three/src/helpers/DirectionalLightHelper.d.ts

@@ -1,16 +1,16 @@
 import { DirectionalLight } from './../lights/DirectionalLight';
-import { Color } from './../math/Color';
 import { Line } from './../objects/Line';
 import { Matrix4 } from './../math/Matrix4';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 export class DirectionalLightHelper extends Object3D {
     /**
      * @param light
      * @param [size=1]
      * @param color
      */
-    constructor(light: DirectionalLight, size?: number, color?: Color | string | number);
+    constructor(light: DirectionalLight, size?: number, color?: ColorRepresentation);
 
     light: DirectionalLight;
     lightPlane: Line;
@@ -19,7 +19,7 @@ export class DirectionalLightHelper extends Object3D {
     /**
      * @default undefined
      */
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
     matrix: Matrix4;
 
     /**

types/three/src/helpers/GridHelper.d.ts

@@ -1,4 +1,4 @@
-import { Color } from './../math/Color';
+import { ColorRepresentation } from '../utils';
 import { LineSegments } from './../objects/LineSegments';
 
 export class GridHelper extends LineSegments {
@@ -8,7 +8,7 @@ export class GridHelper extends LineSegments {
      * @param [color1=0x444444]
      * @param [color2=0x888888]
      */
-    constructor(size?: number, divisions?: number, color1?: Color | string | number, color2?: Color | string | number);
+    constructor(size?: number, divisions?: number, color1?: ColorRepresentation, color2?: ColorRepresentation);
 
     /**
      * @default 'GridHelper'
@@ -18,5 +18,5 @@ export class GridHelper extends LineSegments {
     /**
      * @deprecated Colors should be specified in the constructor.
      */
-    setColors(color1?: Color | string | number, color2?: Color | string | number): void;
+    setColors(color1?: ColorRepresentation, color2?: ColorRepresentation): void;
 }

types/three/src/helpers/HemisphereLightHelper.d.ts

@@ -3,16 +3,17 @@ import { Color } from './../math/Color';
 import { Matrix4 } from './../math/Matrix4';
 import { MeshBasicMaterial } from './../materials/MeshBasicMaterial';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 export class HemisphereLightHelper extends Object3D {
-    constructor(light: HemisphereLight, size: number, color?: Color | number | string);
+    constructor(light: HemisphereLight, size: number, color?: ColorRepresentation);
 
     light: HemisphereLight;
     matrix: Matrix4;
     matrixAutoUpdate: boolean;
     material: MeshBasicMaterial;
 
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
 
     dispose(): void;
     update(): void;

types/three/src/helpers/PointLightHelper.d.ts

@@ -1,18 +1,18 @@
 import { PointLight } from './../lights/PointLight';
-import { Color } from './../math/Color';
 import { Matrix4 } from './../math/Matrix4';
 import { Object3D } from './../core/Object3D';
+import { ColorRepresentation } from '../utils';
 
 export class PointLightHelper extends Object3D {
-    constructor(light: PointLight, sphereSize?: number, color?: Color | string | number);
+    constructor(light: PointLight, sphereSize?: number, color?: ColorRepresentation);
 
     /**
      * @default 'PointLightHelper'
      */
     type: string;
 
     light: PointLight;
-    color: Color | string | number | undefined;
+    color: ColorRepresentation | undefined;
     matrix: Matrix4;
 
     /**