在本系列的第五部分中,我们将探索 Creative Experience个性化您的设计 颜色选择器”。我们将向您展示如何使用颜色选择器功能,用您喜欢的颜色和色调自定义您的 3D 模型。
我在项目面板的 2D 部分中右键单击,创建了一个 2D 颜色选择器。.

在颜色选择器属性面板中,我单击“添加行为”选项,然后选择“新建脚本”。此选择将打开一个屏幕,我们可以在其中编写脚本。.

颜色选择器按钮需要脚本才能正常工作。我已在下方提供了脚本。虽然它本质上是一段 JavaScript 代码,但已使用特定的类和库进行了定制。.
beScript.onStart = function () {
};
beScript.onStop = function () {
};
beScript.execute = function (context) {
};
beScript.onUIValueChange = function (valueChange) {
如果 (this.componentColor !== null && this.componentColor !== undefined)
var updatedColor = new STU.ColorRGB();
updatedColor.fromColor(this.getActor().color);
this.componentColor.baseColor = updatedColor;
};
这里我不会深入探讨脚本的细节,只介绍它的基本功能。前三行包含了脚本初始化、停止和执行时使用的函数。.
beScript.onStart = function () {
};
beScript.onStop = function () {
};
beScript.execute = function (context) {
};
当您使用颜色选择器进行更改时,以下函数会触发。它会检索选定的颜色 (this.getActor().color) 并更新链接材质的颜色 (componentColor)。
beScript.onUIValueChange = function (valueChange) {
如果 (this.componentColor !== null && this.componentColor !== undefined)
var updatedColor = new STU.ColorRGB();
updatedColor.fromColor(this.getActor().color);
this.componentColor.baseColor = updatedColor;
};
componentColor 变量 存储通过颜色选择器选择的新颜色。为了确保其功能正常,我已在“属性”面板中对其进行了定义。

属性面板中的步骤:
注意: 请确保已将材料分配给组件。

配置好这些设置后,我通过颜色选择器选择的任何颜色都会自动更新关联材质的底色。这种设置使用户能够实时交互式地修改材质颜色。.

按照这些步骤,您可以轻松自定义 3D 模型颜色,为您的设计增添个性化元素。“颜色选择器”功能使用户能够实时动态地更改颜色,从而更好地掌控项目的视觉效果。敬请阅读下一篇 博客,我们将深入探讨如何个性化 灯光控制。
……敬请期待下一篇博客,我将在其中深入探讨如何使用颜色来个性化您的设计……