Color.setHSL()

The setHSL() method is a part of the Color class in the Three.js library. It sets the color of an object using hue, saturation, and lightness values.

Syntax

color.setHSL(h, s, l)

Parameters

• h - the hue value between 0 and 1.
• s - the saturation value between 0 and 1.
• l - the lightness value between 0 and 1.

Description

The setHSL() method sets the color of an object using hue, saturation, and lightness values. The h parameter represents the hue value, which ranges from 0 to 1 in a color wheel. The s parameter represents the saturation value, which ranges from 0 (gray) to 1 (fully saturated color). The l parameter represents the lightness value, which ranges from 0 (black) to 1 (fully lit color).

Example

// create a new color object
var color = new THREE.Color();

// set the color to HSL values
color.setHSL(0.2, 0.8, 0.7);

// apply the color to a material
var material = new THREE.MeshBasicMaterial({ color: color });

In this example, a new color object is created using the Color() constructor. The setHSL() method is then used to set the color using hue, saturation, and lightness values. Finally, the color is applied to a material using the MeshBasicMaterial() constructor.

Remarks

• The setHSL() method applies the color to the object immediately.
• If the hue value is greater than 1 or less than 0, it is wrapped around to fit into the 0-1 range.
• If the saturation or lightness values are greater than 1 or less than 0, they are clamped to the 0-1 range.

See Also

• Three.js Color
• HSV to RGB conversion algorithm

Conclusion

The setHSL() method is a useful tool for setting the color of an object in Three.js. It allows for precise control over the hue, saturation, and lightness values, enabling a wide range of color options.