Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

three.js
javascript
animations
webgl
computer graphics

What is the Color class in three.js?

Omer Kamran

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

Three.js is a JavaScript library that is built on top of WebGL and is used to render animations on the web.

There is built-in support for the framework to create and edit colors. This can be done using the objects of the Color class. Colors can be applied to materials in three.js.

Constructor

There are multiple ways to initialize a Color object in three.js. These are as follows:

No arguments

Not providing any arguments will initialize the color to white.

const color = new THREE.Color(); 
// initializes to white

Hexadecimal color

We can also provide the Color constructor with a hexadecimal value of the 0xRRGGBB form. The least significant bytes represent the amount of blue. The most significant bytes represent the amount of red, and the two bytes in the middle represent the amount of green.

const color = new THREE.Color(0xff0000); 
// initializes to red

RGB string

We can also use an RGB string to initialize the Color object. It is of the 'rgb(red, green, blue)' format. Instead of hex, we use decimal numbers to represent the amount of each primary color in the final color. Each primary color can vary between 0 and 255.

const color = new THREE.Color('rgb(0, 255, 0)'); 
// initializes to green

We can also use the percentages of each primary color instead:

const color = new THREE.Color('rgb(0, 100%, 0)')
// initializes to green

We can also use RGB values between 0 and 1. Let’s suppose that x, y, and z are the concentrations of red, green, and blue we want in our color. Dividing each by 255 will give us the RGB value between 0 and 1:

const color = new THREE.Color(0, 0, 1);
// initializes to blue

X11 color names

X11 color names are strings mapped to pre-defined values of hexadecimal colors:

const color = new THREE.Color("goldenrod");
// initializes to a shade of gold

HSL string

HSL is an abbreviation for hue, saturation, and lightness. We can use these values as well to define the color we need. HSL strings are of the 'hsl(hue, saturation, lightness)' format. hue ranges from 0360. saturation and lightness can vary from 0100%:

const color = new THREE.Color('hsl(255, 100%, 50%)');

Return value

The constructor returns an instance of the Color class. The methods and properties applicable to this class can be viewed here.

Example

Here's an example that illustrates the different methods that can be initialized and used in a three.js scene:

Explanation

The user can interact with the code shown above to change the color of the shape displayed in the scene.

To read more on how to create a scene in three.js, please follow this link.

  • Lines 38–41: We initialize multiple color variables as explained in the constructor syntax above.
  • Line 43: We set the color property of material. We can change the color4 variable inside to see the effects of different colors.

RELATED TAGS

three.js
javascript
animations
webgl
computer graphics

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring