Creating Color Object in Three.js

Using the THREE.Color object

The light sources use colors. For now, we’ve just configured the colors using a hex string, but the THREE.Color object provides a lot of different options for creating the initial color object.

In Three.js, when we need to provide a color (for example, for materials, lights, and so on), we can pass in a THREE.Color object; otherwise, Three.js will create one from a passed-in string value, as we saw for THREE.AmbientLight. Three.js is very flexible when parsing the input for the THREE.Color constructor.

Constructing THREE.Color object

We can create a THREE.Color object in the following ways:

• Hex string: new THREE.Color("#ababab") will create a color based on the passed-in CSS color string.

• Hex value: new THREE.Color(0xababab) will create the color based on the passed-in hex value. If we know the hex value, this is usually the best approach.

• RGB string: We can use new THREE.Color("rgb(255, 0, 0)") or new THREE.Color("rgb(100%, 0%, 0%)").

• Color name: We can use named colors as well–for example, new THREE.Color( 'skyblue' ).

• HSL string: If we like working in the HSL domain instead of the RGB domain, we can pass in the HSL values with new THREE.Color("hsl(0, 100%, 50%)").

• Separate RGB ...