Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Creating Color Object in Three.js

Explore how to create and customize THREE.Color objects using hex, RGB, HSL, and named values in Three.js. Understand methods for setting, copying, and modifying colors to control the appearance of lights and materials in your 3D scenes effectively.

We'll cover the following...

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