Build a simple product configurator in Unity in one hour or less
先决条件
本教程面向具备Unity项目开发初级到中级知识的开发者。要完成本教程，您需要……
1.安装以下软件：
Unity Industry的试用版或正式版许可证
- Unity 的行业商品配置器软件包，可从GitHub获取。
2.Add3D模型：使用自己的3D模型文件，也可以使用模板中包含的文件。
3.Add基础材料：准备至少 2-3 种不同的材料，或者重复使用教程中已经包含的金属材料。
预计完成时间：30-60分钟
浏览样本项目
本教程以 Unity 的行业商品配置样本项目为学习基础和起点。该样本演示了一个完整的工作配置器，具有材料和组件切换、相机控制和用户界面——这正是您将在练习中学习实现的功能。
该样本包含现成的可见性、材质、动画和变换变体组件，因此您可以专注于您的产品，而不是从头开始构建变体系统。
打开样本项目并创建您自己的场景
通过先探索样本项目，您将在构建自己的项目之前获得产品配置器的实际操作经验。请按照以下步骤进行安装：
1.在Unity Hub中，使用基于通用渲染管线(URP) 的通用3D模板创建一个新的Unity项目。
2.Download并安装行业商品配置器样本项目：
- 要安装该软件包，请从GitHub 代码仓库上的绿色代码按钮复制URL ，然后打开 Unity 的包管理器。
- 点击加号图标，选择“从 Git URLAdd包” ，然后粘贴代码仓库链接。Unity将下载并安装所有必要的组件。
3.下载完成后，打开样本场景并运行它，即可看到功能齐全的配置器实际运行效果。该样本演示了材料切换、组件可见性切换和相机控制，让您立即了解其功能以及系统的工作原理。该软件包为 Unity 的现有系统添加了特定于配置器的组件，以快速启动您的(用作动词)构建原型。
4.注意：如果您在使用Git URL安装时遇到问题，检查包管理器故障排除指南。
✓ 检查点：现在，当您在Hierarchy或游戏对象菜单下右键单击时，应该可以看到商品配置器选项。GitHub仓库中也提供了配置器样本的详细说明，可以帮助您从中获得最大的学习收益。
产品配置器在编辑器中打开。
导入3D模型
在花一些时间探索样本之后，下一步是引入一个3D模型，并为其添加材料切换功能。如果您想更快地完成本教程，可以使用样本中已包含的滑移装载机模型（搜索滑移装载机）。或者，您也可以轻松地导入自己的模型，下一节将介绍两种转化选项之一：Unity Asset Manager中的“优化和转换”功能或Unity Asset Transformer Toolkit。如果您想使用样本项目中包含的模型，也可以跳过此部分。
Asset Manager
如果您计划编译版本专业的配置器，请考虑将Asset Manager集成到您的工作流程中。Unity 的Asset Manager是一款基于云的数字资产管理 (DAM) 解决方案，它简化了团队上传、管理、转换、共享和访问其复杂的实时3D资产的方式。Unity Industry订阅包含Asset Manager 的使用权限。
您可以使用Asset Manager准备和优化您的3D模型，特别是使用其优化和转换功能。它会通过清理网格、优化多边形数量并将其转换为 Unity 可用的格式来转换您的3D资源。该过程可在不到一分钟内完成，并提高大型文件转换的工作流程效率。
点击这里了解更多关于Asset Manager的信息：
使用Asset Transformer工具包的 CAD工作流程
如果您需要转换复杂的 CAD 模型，那么可以考虑使用Unity Asset Transformer Toolkit ，它可以处理各种 CAD 文件格式并提供高级优化功能。ImportCAD 模型直接导入Unity，然后使用Asset Transformer 的工具减少多边形数量、简化材质，并为实时可视化准备模型。
点击此处了解更多关于Asset Transformer插件的信息：
设置你的场景
起始为配置器创建一个新场景。将滑移装载机Add到空白场景中，或者如果您使用的是自己的3D模型，请将其导入场景并放置在合适的位置。现在模型已准备就绪，您可以添加您在样本项目中观察到的材料切换功能。
✓ 检查点：场景中应包含您的3D模型，并将其放置在“场景”视图中可以清晰看到的位置。模型应应用材质，并在Game视图中可见。
Build材料切换功能
现在您将实现核心配置器功能——允许用户实时切换产品上的材料。
Create材质变体
1.起始，通过从游戏对象菜单中选择或在Hierarchy中右键单击，使用内置的变体集组件。您有不同的选择，但本教程将重点介绍Material 变体。
- 该软件包的材质变体系统使用检测系统，可自动查找复杂对象层次结构中所有使用目标材质的网格渲染器。
2.使用组件中的“目标父”选项定义基础材质和父对象，然后让捕获工具识别所有相关的网格渲染器。这样既能保证具有多个组件的产品的一致性，又能保持性能。
确定您的基础材料
3.用金属漆饰面重新利用这两种材料，金属绘制- 红色和金属绘制- 蓝色（或者创造你自己的替代品）。将材料拖入变体槽位中，即可将材料分配给每个变体槽位。系统处理所有切换逻辑，并在变体发生变化时自动更新材料。使用检查器中的内置预览滑块立即测试变体，并查看红色和蓝色饰面在模型上的效果。
✓ 检查点：现在您应该在材质变体集组件中看到两种材质变体（金属绘制- 红色和金属绘制- 蓝色）。当您在检查器中拖动预览滑块时，您的模型应该在“场景”视图中实时地在红色和蓝色金属饰面之间切换。
有关材质创建的帮助，请参阅 Unity 的材质文档。
将变体Connect到用户界面
商品配置器软件包包含一个VariantSelect组件，该组件可生成现有变体集的下拉选单菜单，以便快速开发配置器。此功能旨在让非开发人员能够轻松地在场景中选择变体集，并直接与 Unity 的事件系统集成，使您无需自定义脚本编译版本功能齐全的配置器。这对于使用 uGUI 解决方案的用户来说尤其有用，因为它允许他们直接将组件分配给OnClick事件。
Create用户界面
材料变体功能正常运行后，您需要一个界面，使用户能够控制这些配置并与您的产品配置器进行交互。
Unity提供两种UI系统：基于游戏对象的UI系统 (uGUI) 和较新的UI工具包。在本教程中，我们将使用基于游戏对象 的uGUI 系统，因为它允许与 VariantSelect组件进行拖放集成，而无需任何代码。
1.将按钮从UI菜单阻力到Hierarchy中，并为其命名（例如，“红色金属按钮”）。
- 当你创建第一个UI元素时， Unity会自动在你的场景中创建Canvas和EventSystem对象。Canvas作为所有UI 元素的容器，而EventSystem处理用户输入，例如按钮点击。
- 确保Canvas组件设置为随屏幕大小缩放。此设置可使UI 元素在不同的屏幕分辨率下保持一致的比例。将参考分辨率设置为与目标屏幕尺寸相匹配——在本例中，它可以是1920x1080 。这定义了UI布局所依据的基准分辨率。此外，将Match属性设置为0.5 ，这样可以平衡宽度和高度缩放，确保UI 元素无论屏幕比参考屏幕更宽还是更高，都能均匀缩放。UIUI定技巧：要使按钮固定在指定的屏幕边缘（顶部/底部），请选择您的UI元素，然后在Rect Transform组件的锚点预设面板中单击所需的锚定预设。请参阅Unity UI锚定指南了解更多信息
2.要将按钮连接到变体选择，请在Hierarchy中选择按钮，在检查器中找到按钮组件，然后查找OnClick()部分。
3.点击“ + ”添加新事件，将带有 VariantSelect组件的游戏对象拖到对象字段中，从下拉选单中选择VariantSelect ，然后选择SelectVariant以在单击按钮时触发材质更改。
4.为每种材质饰面（蓝色金属按钮）Create额外的按钮，并以相同的方式连接它们。如果您想了解更多关于 uGUI 基础知识，请访问此教程以主控基础知识。
✓ 检查点：点击“播放模式”，然后点击“红色金属”按钮，您的模型应该会变成红色金属质感。点击蓝色金属按钮，将其更改为蓝色。你应该能在Hierarchy中看到Canvas和EventSystem ，并且按钮应该在Game视图中可见。
如果按钮无法正常工作，请验证您的OnClick事件是否已正确连接，并检查Unity 的按钮文档。
面向高级用户：如果您熟悉脚本编写，那么从 20:10 开始的这段视频将向您展示如何使用VariantSetController脚本自动生成UI按钮，该脚本可以动态创建具有正确名称和功能的按钮。
Add相机控制
一个完整的配置器界面还应该让用户能够控制他们查看产品的方式，允许他们探索不同的角度和视角。
为了给您的配置器提供最佳的用户体验，您可以使用Cinemachine软件包，它提供了一种无需代码即可设置专业摄像机视图的解决方案。配置器样本项目已经包含Cinemachine设置，因此您可以立即开始添加自己的摄像机。
1.要为您的产品创建一个新的摄像机角度，转到游戏对象 > Cinemachine > 摄像机 ，向场景中添加一个新的虚拟摄像机。Position，从所需角度展示您的产品，例如，拍摄特写镜头以突出材料变化。
- 提示：使用“与视图对齐” （ Windows下为 Ctrl-Shift-F，Mac 系统下为 Cmd-Shift-F）作为起点。这会将相机移动到与“场景”视图相同的位置。从这个位置，更容易找到你想要的角度。
2.在Cinemachine 摄像机组件中，设置优先级值以确定何时应激活此摄像机（数值越高优先级越高）。使用Cinemachine摄像机组件中的Solo按钮来测试不同的摄像机视图。
3.Add两到三个摄像头，以便从不同角度拍摄。Cinemachine Brain组件（自动添加到您的主摄像机）控制不同摄像机之间的混合，始终以最高优先级选择虚拟摄像机。观看此视频，了解更多关于在Unity 6 中使用Cinemachine 的信息。
4.将摄像头连接到UI控件：要激活不同的相机视图，请创建UI按钮（从您的材质变体按钮复制粘贴，并将其重命名为相机）。对于 OnClick事件，拖动要控制的相机并使用Prioritize选项。这将把优先级设置为最高，因此该虚拟摄像头将成为活动摄像头。
5.设置交互式相机控制：对于交互式摄像机移动，请使用FreeLook 摄像机，它允许您使用鼠标控制围绕产品进行旋转移动。
6.配置输入操作：在CinemachineInputAxis控制器组件中，您会看到“驱动轴”部分，其中包含“X旋转环绕” 、 “Y旋转环绕”和“旋转缩放”选项。这些应该使用商品配置器包中的玩家/视角输入操作进行配置。要查找这些操作，请导航至：
资源/示例/商品配置器/1.6.0/标准配置设置/标准UI操作
从该文件夹阻力“玩家/视角”操作拖到“驱动轴”部分的“视角旋转X”和“视角旋转Y”输入字段中。这样，只有单击按钮右键时才能启用鼠标控制的相机功能。
现在，您可以测试您的配置器，用户可以通过界面控制多个摄像头角度。
最后润色和网络部署
交互式配置器完成后，最后一步是将其准备用于 Web 部署，以便用户可以通过浏览器访问它。
使用Build文件BuildWebGL。
要将配置器部署到WebGL，请使用Web选项作为平台。导航至“File” > “Build文件” ，然后在窗口左侧选择“Web”作为目标平台。请确保您的场景已添加到场景列表中，并删除您不想编译版本的任何其他场景。
要将配置器部署到WebGL，请使用 Web选项作为平台。
如果您看到“未加载 Web模块”message以及“使用Unity Hub安装”按钮，则需要安装WebGLBuildSupport模块。点击安装按钮， Unity Hub将下载并安装WebGLBuildSupport模块。您需要重启编辑器才能加载新模块。
安装WebGLBuildSupport模块后，配置编译版本设置，包括纹理压缩选项、代码优化级别和适合浏览器部署的内存限制。
切换到WebGL 平台后，请查看播放器设置，以进行针对 Web 平台的优化。转到“Edit” > “Project Settings” > “播放器” ，然后选择“Web”选项选项卡。在Publishing Settings部分，您可以将压缩格式设置为Brotli （建议用于较小的文件大小）。请参阅 Unity 的Web Player 设置文档，了解有关优化这些设置的详细指南。
一切准备就绪后，点击“Build and Run” 。Unity将生成一个文件夹，其中包含在 Web 浏览器中启动配置器所需的一切。浏览器将自动打开，您应该可以看到您的编译版本running流畅。如果只点击“Build” ，则需要将输出托管在本地或远程 Web 服务器上。Unity还通过Unity Play提供托管选项。如果您使用的是Unity 6.1 或更高版本， Unity提供了一个选项，可以直接从WebGLBuild Settings发布到Unity Play 。
现在你应该能看到一个浏览器窗口打开，你的应用已经上线了。
在线测试和发布
在不同的浏览器和设备上测试您的配置器，以确保性能一致。该软件包组件在WebGL构建中运行良好，但请考虑变体切换在目标设备上的性能，并相应地调整复杂度。
Unity会创建一个完整的编译版本文件夹，其中包含 index.html 文件、压缩的游戏数据以及所有必要的资源。该文件夹可以托管在任何标准 Web 服务器上，使您可以通过任何现代 Web 浏览器访问您的配置器。
✓ 最终成功：您现在拥有一个可用的产品配置器。您的编译版本文件夹应包含一个 index.html 文件，当在浏览器中打开（或托管在 Web 服务器上）时，该文件将显示您的3D模型，并带有交互式的红色金属和蓝色金属按钮，可实时更改模型的表面处理效果。
选修的：营造逼真的工业环境
为了提升专业演示效果，可以考虑添加 Unity Asset Store中的环境包。Unity提供官方的工业环境，例如Unity Factory和Unity Warehouse ，或者寻找带有预配置照明和后期处理配置文件的干净工作室设置。这些软件包为逼真的产品可视化提供了基础，而无需进行大量的环境创建。此外， Unity Hub还包含URP 3D示例场景模板，该模板演示了优化的照明和渲染设置。
选修的：使用UI工具包高级UI
对于更高级的UI开发， Unity提供了UI Toolkit ，它借鉴了 Web 开发实践，使用类似于CSS和XML 的结构（在UI Toolkit 中，等效项分别称为 USS 和 UXML）。使用UI Toolkit构建配置器界面需要用C#编写一些代码来定义和设置按钮功能。这是因为UI Toolkit 没有提供开箱即用的方法来将按钮点击与功能连接起来。该样本项目的用户界面使用Unity UI Toolkit 构建，可提供有关其实现的宝贵见解。
下面您可以看到一小段代码片段，展示了如何make指定的按钮（名为 change）执行来自 variant select组件的预定义操作：
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 Toolkit 向UI添加按钮，请参阅Unity Learn上的这篇教程。
选修的：高级变体功能
除了基本的材质替换之外，该软件包还支持动画和变换变体，以实现动态演示。使用这些用于带有活动部件、可调节组件或可通过动画展示来增强效果的产品。Transform变体处理位置、旋转和缩放修改，而动画变体则演示功能或提供引人入胜的过渡效果。当您想要展示产品功能或创建更具吸引力的配置器体验时，这些高级功能非常有效。
除了基本的材质替换之外，你还可以使用动画和变换变体来进行动态演示。
现在您已经掌握了使用 Unity 的 Industry 商品 Configurator 包编译版本配置器的基本知识。无论您是为消费品、工业设备还是建筑可视化构建系统，此基础架构都能提供创建引人注目的配置器所需的一切，从而推动业务成果。
