Creative Experience:使用颜色选择器个性化您的设计

2024年12月12日 阅读时间:3分钟
分享

在本系列的第五部分中,我们将探索 Creative Experience个性化您的设计 颜色选择器”。我们将向您展示如何使用颜色选择器功能,用您喜欢的颜色和色调自定义您的 3D 模型。

二维颜色选择器

创建二维颜色选择器

我在项目面板的 2D 部分中右键单击,创建了一个 2D 颜色选择器。.

图 1:创建 2D 颜色选择器

2D颜色选择器属性

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

图 2:二维颜色选择器属性

脚本:颜色选择器

颜色选择器按钮需要脚本才能正常工作。我已在下方提供了脚本。虽然它本质上是一段 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 变量 存储通过颜色选择器选择的新颜色。为了确保其功能正常,我已在“属性”面板中对其进行了定义。

图 3:行为编辑器

属性面板中的步骤:

  • 选择“材质”作为 类型
  • “值” 字段中,选择要更改颜色的材料(例如,侧面板)。

注意: 请确保已将材料分配给组件。

图 4:向上翻开“属性”面板

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

图 5:体验色彩游戏

结论:

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

Creative Experience :用光线控制点亮您的设计

Rıdvan Polat
的最新文章 Rıdvan Polat 查看全部
订阅
通知
客人

1 评论
最老
最新 最受欢迎
内联反馈
查看所有评论
引用通告

……敬请期待下一篇博客,我将在其中深入探讨如何使用颜色来个性化您的设计……

1
0
欢迎留言分享您的想法