在Unity中在一小时或更短的时间内构建一个简单的产品配置器
先决条件
本操作指引面向对在Unity中开发项目有初级到中级知识的开发者。要完成本操作指引，您需要
1.安装以下内容:
- Unity Industry的试用或常规许可证
- Unity的行业产品配置器包，可从GitHub获取
2.添加3D模型:使用您自己的3D模型文件或模板中包含的模型。
3.添加基本材料:手头至少准备2-3种不同的材料，或重用本操作指引中已包含的金属材料。
预计完成时间:30-60分钟
探索示例项目
本操作指引使用Unity的行业产品配置器示例项目作为学习基础和起点。该示例演示了一个完整的工作配置器，具有材料和组件切换、相机控制和用户界面——正是您将在练习中学习实现的功能。
该示例包括现成的可见性组件，以及材料、动画和变换变体，因此您可以专注于您的产品，而不是从头构建变体系统。
打开示例项目并创建您自己的场景
通过首先探索示例项目，您将在构建自己的产品配置器之前获得实践经验。按照以下步骤进行安装：
1.在Unity Hub中，使用基于Universal 3D模板的新Unity项目。
2.下载并安装行业产品配置器示例项目：
- 要安装该包，请从GitHub存储库的绿色代码按钮复制URL，并打开Unity的包管理器。
- 点击加号图标，选择从git URL添加包，然后粘贴存储库链接。Unity将下载并安装所有必要的组件。
3.下载完成后，打开示例场景并运行它，以查看一个完全功能的配置器在运行。该示例演示了材料切换、组件可见性切换和相机控制，让您立即了解可能性以及系统的工作原理。该包向Unity现有系统添加了特定于配置器的组件，以快速启动您的原型。
4.注意：如果您在Git URL安装中遇到问题，请查看包管理器故障排除指南。
✓ 检查点：现在，当您在层级视图中右键单击或在GameObject菜单下时，应该会看到产品配置器选项。GitHub存储库中还有关于配置器示例的良好说明，可以帮助您从中获得最大的学习。
产品配置器在编辑器中打开
导入3D模型
一旦你花了一些时间探索示例，下一步是导入一个3D模型，并为其添加材质切换功能。如果你想更快地完成这个操作指引，可以使用示例中已经包含的Skidloader模型（搜索Skidloader）。或者，你可以通过接下来部分解释的两种转换选项轻松导入自己的模型：Unity Asset Manager中的优化和转换功能或Unity Asset Transformer Toolkit。如果你想使用示例项目中包含的模型，可以跳过这一部分。
Asset Manager
如果你计划构建专业的配置器，考虑将资产管理器集成到你的工作流程中。Unity的资产管理器是一个基于云的数字资产管理（DAM）解决方案，简化了团队上传、管理、转换、共享和访问复杂实时3D资产的方式。访问资产管理器包含在Unity Industry订阅中。
你可以使用资产管理器准备和优化你的3D模型，特别是使用其优化和转换功能。这通过清理网格、优化多边形数量并将其转换为Unity准备好的格式来转换你的3D资产。这个过程在一分钟内完成，并提高了大文件转换的工作效率。
在这里了解更多关于资产管理器的信息：
- 资产管理器传输方法简介。
与资产转换工具包的CAD工作流程
如果你需要转换复杂的CAD模型，可以考虑使用Unity的资产转换工具包，它处理各种CAD文件格式并提供高级优化功能。将CAD模型直接导入Unity，然后使用资产转换器的工具减少多边形数量，简化材质，并为实时可视化准备模型。
在这里了解更多关于资产转换插件的信息：
设置您的场景
首先为您的配置器创建一个新场景。将滑移装载机添加到空场景中，或者如果您使用自己的3D模型，请将其导入场景并适当定位。模型现在准备好让您添加在示例项目中观察到的材料切换功能。
✓ 检查点：您的场景应包含您的3D模型，并且在场景视图中可以清晰看到。模型应已应用材料，并在游戏视图中可见。
构建材料切换功能
现在您将实现核心配置器功能——允许用户实时切换产品上的材料。
创建材料变体
1.首先通过从GameObject菜单中选择或在层级中右键单击来使用内置的变体集组件。您将有不同的选项，但对于本教程，我们将重点关注材料变体。
- 该包的材料变体系统使用检测系统，自动查找在复杂对象层次结构中使用目标材料的所有网格渲染器。
2.使用组件中的目标父对象选项定义您的基础材料和父对象，然后让捕获工具识别所有相关的网格渲染器。这确保了具有多个组件的产品之间的一致性，同时保持性能。
定义您的基础材料
3.重用这两种金属饰面材料，金属漆 - 红色和金属漆 - 蓝色（或创建您自己的等效材料）。通过将材料拖放到变体字段中，将材料分配给每个变体插槽。系统处理所有切换逻辑，在变体更改时自动更新材料。使用检查器中的内置预览滑块立即测试变体，并查看红色和蓝色饰面在模型上的效果。
✓ 检查点：您现在应该在您的材质变体集组件中看到两个材质变体（金属漆 - 红色和金属漆 - 蓝色）。当您在检查器中拖动预览滑块时，您的模型应该在场景视图中实时切换红色和蓝色金属饰面。
有关材料创建的帮助，请参见Unity的材料文档。
将变体连接到用户界面
产品配置器包包括一个VariantSelect组件，该组件生成现有变体集的下拉菜单，以便快速配置器开发。此功能旨在让非开发人员轻松选择场景中的变体集，并直接与Unity的事件系统集成，让您无需自定义脚本即可构建功能性配置器。这对于使用uGUI解决方案的用户特别有用，允许他们直接将组件分配给OnClick事件。
创建用户界面
在您的材料变体正常工作后，您需要一个界面，让用户控制这些配置并与您的产品配置器互动。
Unity提供两种UI系统：基于GameObject的UI系统（uGUI）和较新的UI工具包。在本教程中，我们将使用基于GameObject的uGUI系统，因为它允许与VariantSelect组件进行拖放集成，而无需任何代码。
1.从UI菜单中拖放一个按钮到层级中，并将其命名（例如，“红色金属按钮”）。
- 当您创建第一个UI元素时，Unity会自动在您的场景中创建画布和事件系统对象。画布充当所有UI元素的容器，而事件系统处理用户输入，如按钮点击。
- 确保画布组件设置为与屏幕尺寸缩放。此设置允许UI元素在不同屏幕分辨率下保持一致的比例。将参考分辨率设置为匹配您的目标屏幕尺寸 - 在此示例中，它可以是1920x1080。这定义了您的UI布局所基于的基线分辨率。此外，将匹配属性设置为0.5，这在宽度和高度缩放之间取得平衡，确保您的UI元素均匀缩放，无论屏幕是比参考更宽还是更高。UI锚定提示：要将按钮固定在特定的屏幕边缘（顶部/底部），选择您的UI元素，然后在Rect Transform组件的锚点预设面板中单击所需的锚点预设。在Unity UI 锚点指南中了解更多信息。
2.要将按钮连接到变体选择中，请在层级视图中选择您的按钮，在检查器中找到按钮组件，并查找OnClick()部分。
3.单击"+"以添加新事件，将带有VariantSelect组件的GameObject拖入对象字段，从下拉菜单中选择VariantSelect，并选择选择变体以在单击按钮时触发材质更改。
4.为每种材质效果（蓝色金属按钮）创建额外的按钮，并以相同的方式连接它们。如果您想了解更多关于uGUI基础知识的信息，请访问此教程以掌握基础知识。
✓ 检查点：单击播放模式，然后单击红色金属按钮，您的模型应更改为红色金属效果。单击蓝色金属按钮将其更改为蓝色。您应该在层级视图中看到一个画布和事件系统，并且您的按钮应该在游戏视图中可见。
如果按钮无法正常工作，请验证您的OnClick事件是否正确连接，并检查Unity的按钮文档。
对于高级用户：如果您对脚本编写感到舒适，此视频从20:10开始展示了如何使用VariantSetController脚本自动生成UI按钮，该脚本动态创建具有正确名称和功能的按钮。
添加相机控制
完整的配置器界面还应让用户控制他们查看产品的方式，允许他们探索不同的角度和视角。
为了给您的配置器提供最佳用户体验，您可以使用Cinemachine包，它提供了一个无代码解决方案来设置专业的相机视图。配置器示例项目已经包含了Cinemachine设置，因此您可以立即开始添加自己的相机。
1.要为您的产品创建新的相机角度，请转到GameObject > Cinemachine > Camera以向场景中添加新的虚拟相机。将此相机定位以从所需角度显示您的产品，例如，特写视图突出显示材质变化。
- 提示：使用与视图对齐（Windows上的Ctrl-Shift-F或Mac上的Cmd-Shift-F）作为起点。这将把您的相机移动到与场景视图相同的位置。从这个位置，更容易找到您想要的角度。
2.在Cinemachine相机组件中，设置优先级值以确定何时该相机应处于活动状态（较高的数字优先级更高）。在Cinemachine相机组件中使用独奏按钮测试不同的相机视图。
3.添加两到三台相机以获得不同的视角。Cinemachine Brain组件（自动添加到您的主相机）控制不同相机之间的混合，始终选择优先级最高的虚拟相机。请参见此视频以了解更多关于在Unity 6中使用Cinemachine的信息。
4.将相机连接到UI控件：要激活不同的相机视图，创建UI按钮（从您的材质变体按钮复制并粘贴，并为相机重命名）。对于OnClick事件，拖动您想要控制的相机，并使用优先级选项。这将把优先级设置为最高，因此这个虚拟相机将是活动相机。
5.设置交互式相机控制：对于交互式相机移动，使用自由视角相机，允许鼠标控制围绕您的产品进行轨道移动。
6.配置输入操作：在Cinemachine输入轴控制器组件中，您将看到驱动轴部分，其中包含视角轨道X、视角轨道Y和轨道缩放选项。这些应与来自产品配置器包的玩家/视角输入操作进行配置。要找到这些操作，请导航到：
资产/示例/产品配置器/1.6.0/标准配置设置/标准UI操作
将此文件夹中的玩家/视角操作拖到驱动轴部分的视角轨道X和视角轨道Y的输入字段中。这仅在右键单击时启用鼠标控制的相机。
现在您准备好通过界面测试您的配置器，使用多个用户可以控制的相机角度。
最后的修饰和网络部署
完成您的互动配置器后，最后一步是为网络部署做好准备，以便用户可以通过浏览器访问它。
为 WebGL 构建，使用构建配置
要将您的配置器部署到 WebGL，请使用 Web 选项作为平台。导航到 文件 > 构建配置，并在窗口左侧选择 Web 作为目标平台。确保您的场景出现在场景列表中，并删除您不想构建的其他场景。
要将您的配置器部署到 WebGL，请使用 Web 选项作为平台。
如果您看到消息 未加载 Web 模块，并有一个 使用 Unity Hub 安装 按钮，您需要安装 WebGL 构建支持 模块。单击安装按钮，Unity Hub 将下载并安装 WebGL 构建支持模块。您需要重新启动编辑器以加载新模块。
安装 WebGL 构建支持模块后，配置构建设置，包括适合浏览器部署的纹理压缩选项、代码优化级别和内存限制。
切换到 WebGL 平台后，检查针对网络特定优化的播放器设置。转到 编辑 > 项目设置 > 播放器，并选择 Web 选项卡。在 发布设置 部分，您可以将 压缩格式 设置为 Brotli（推荐用于更小的文件大小）。请参阅 Unity 的 Web Player 设置文档，以获取有关优化这些设置的详细指导。
一切准备就绪后，单击 构建并运行。Unity 将生成一个文件夹，其中包含在网络浏览器中启动您的配置器所需的所有内容。浏览器将自动打开，您应该看到您的构建运行顺利。如果您只单击 构建，您需要在本地或远程网络服务器上托管输出。Unity 还通过 Unity Play 提供托管选项。
您现在应该看到一个浏览器窗口打开，您的应用程序已上线。
在线测试和发布
在不同的浏览器和设备上测试您的配置器，以确保性能一致。包组件在 WebGL 构建中表现良好，但请考虑变体切换在目标设备上的表现，并相应调整复杂性。
Unity 创建一个完整的构建文件夹，其中包含 index.html 文件、压缩的游戏数据和所有必要的素材资源。该文件夹可以托管在任何标准网络服务器上，使您的配置器可以通过任何现代网络浏览器访问。
✓ 最终成功：您现在拥有一个可工作的产品配置器。您的构建文件夹应包含一个 index.html 文件，当在浏览器中打开（或托管在网络服务器上）时，显示您的 3D 模型，并带有交互式红色金属和蓝色金属按钮，可以实时更改模型的表面处理。
可选：创建一个真实的工业环境
为了增强专业演示，考虑添加 Unity 的资产商店环境包之一。Unity 提供官方工业环境，如 Unity Factory 和 Unity Warehouse，或者寻找带有预配置照明和后期处理配置文件的干净工作室设置。这些包为真实的产品可视化提供基础，而无需大量创建环境。此外，Unity Hub 包含 URP 3D 示例场景 模板，演示优化的照明和渲染设置。
可选：使用 UI 工具包的高级 UI
对于更高级的 UI 开发，Unity 提供 UI Toolkit，它借鉴了网络开发实践，使用类似于 CSS 和 XML 的结构（在 UI Toolkit 中，相应的称为 USS 和 UXML）。使用 UI Toolkit 构建您的配置器界面需要一些 C# 编码，以定义和定时按钮功能。这是因为 UI Toolkit 不提供开箱即用的方式将按钮点击与功能连接。示例项目的用户界面是使用Unity UI工具包构建的，提供了有关其实现的宝贵见解。
下面您可以看到一个小代码片段，展示了如何使特定按钮（称为更改）执行变体选择组件中的定义操作：
using IndustryCSE.Tool.ProductConfigurator.Runtime;
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleUIController : MonoBehaviour
{
[SerializeField]
private VariantSelect variantSelect; // Reference to the VariantSelect instance
[SerializeField]
private UIDocument uiDocument; // Reference to the UI Document
private void Start()
{
if (variantSelect == null || uiDocument == null) return;
// Get the root visual element
var root = uiDocument.rootVisualElement;
// Query the button named "change"
var changeButton = root.Q<Button>("change");
if (changeButton != null)
{
// Add a callback to the button
changeButton.clicked += () =>
{
variantSelect.SelectVariant(); // Trigger the variant selection
};
}
}
}
要了解如何使用UI工具包将按钮添加到您的UI中，请参见此Unity Learn教程。
可选：高级变体功能
除了基本的材质交换外，该包还支持动态演示的动画和变换变体。将这些用于具有活动部件、可调组件或受益于动画展示的功能的产品。变换变体处理位置、旋转和缩放修改，而动画变体展示功能或提供引人入胜的过渡。这些高级功能在您想展示产品功能或创建更具吸引力的配置器体验时效果很好。
除了基本的材质交换外，您还可以使用动画和变换变体进行动态演示。
您现在具备了使用Unity的行业产品配置器包构建配置器的基本知识。无论您是为工业设备、消费产品还是建筑可视化构建，这一基础提供了创建引人注目的配置器所需的一切，以推动业务成果。
Read the article
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
