In the fifth part of the series, we will learn how to personalize our 3D model in the desired color and tone using the Color Picker feature.

2D Color Picker

Create 2D Color Picker

I created a 2D Color Picker by right-clicking on the 2D section in the Project Panel.

2D Color Picker Properties

In the Color Picker Properties Panel, I click on the ‘Add Behavior’ option and then select ‘New Script.’ This selection brings up a screen where we can write a script.

Script: Color Picker

The Color Picker button requires a script to function. I have provided the script for you below. While it is essentially a JavaScript code, it has been customized with specific classes and libraries.

 

beScript.onStart = function () {

};

beScript.onStop = function () {

};

beScript.execute = function (context) {

};

beScript.onUIValueChange = function (valueChange) {

    if (this.componentColor !== null && this.componentColor !== undefined)

        var updatedColor = new STU.ColorRGB();

    updatedColor.fromColor(this.getActor().color);

    this.componentColor.baseColor = updatedColor;

};

 

I won’t dive into the details of the script here. I will only talk about its general functionality. The first three lines contain the functions used when the script is initialized, stopped, and executed.

 

beScript.onStart = function () {

};

beScript.onStop = function () {

};

beScript.execute = function (context) {

};

 

The following function is triggered whenever a change is made on the Color Picker button. The primary purpose of the function is to retrieve the color selected through the Color Picker (this.getActor().color) and update the color of the material it is linked to (componentColor).

 

beScript.onUIValueChange = function (valueChange) {

    if (this.componentColor !== null && this.componentColor !== undefined)

        var updatedColor = new STU.ColorRGB();

    updatedColor.fromColor(this.getActor().color);

    this.componentColor.baseColor = updatedColor;

};

 

The componentColor variable holds the value of the new color selected through the Color Picker and must be defined in the Properties panel to work correctly.

Steps in the Properties Panel:

• Select Material as the Type.
• In the Value field, choose the material whose color you want to change (e.g., Side Panel).

Note: It is important to ensure that the material you want to change the color of has already been assigned to a component.

Once these settings are configured, any color selected through the Color Picker will automatically update the base color of the linked material. This allows users to interactively and in real-time change the material color using the Color Picker.