玩具定制器

Toy Customizer是一个使用 QML 构建的交互式 3D 应用程序，允许用户通过在玩具上实时安装 3D 配件和面部特征来个性化玩具角色。它演示了如何将Qt Quick 3D场景与标准的Qt Quick Controls结合起来，实现直观的用户界面。

运行示例

运行示例 Qt Creator，打开Welcome 模式，然后从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

概述

该示例使用Qt Quick 3D 实时渲染了一个 3D 玩具模型。通过用户界面，用户可以选择不同的玩具，附加各种三维配件和面部项目，并在三维视图中查看结果的同时调整这些配件的颜色。

布局可适应纵向和横向，该示例也可在 WebAssembly (WASM) 平台上运行；更多信息，请参阅Qt for WebAssembly。

该示例的亮点

• 使用PrincipledMaterial 为玩具模型定义基于物理的材料。
• 将 2D QML 控件与 3D 场景相结合。
• 用可重复使用的 QML 文件来组织组件，以获得更好的结构。
• 允许用户通过在 3D 场景上拖动来旋转 3D 预览中的玩具。
• 使用Timeline 和TimelineAnimation 为首页上的玩具添加简短的入口和舞蹈动画。

应用程序结构

主 QML 文件Main.qml 定义了主应用程序窗口，并管理六个页面之间的导航。

• 第一页：玩具进入视图并依次表演简短的舞蹈动画。
• 图库页面：显示玩具网格，用户可以选择其中一个。
• 确认页面：显示所选玩具的更多详细信息并要求确认。
• 自定义页面：用户可为玩具选择配件和名称。
• 订单概览页面：在订单完成前汇总当前订单。
• 最终页面：确认订单已完成，并允许用户开始新订单。

资产

如果还没有资产，则会在构建时下载。下载完成后，将提取压缩包。在后续的构建过程中，如果提取的任何资产文件发生变化，则会再次提取存档，以确保所有所需的资产都可用，并避免运行失败。如果由于资产问题或更新的资产包导致构建失败，执行清理构建会删除下载的存档和提取的文件，这样下一次构建就可以从新开始。

动画

第一页有一个View3D 。Texture 用作 HDRlight probe ，为 3D 玩具提供基于图像的照明。另外还添加了PerspectiveCamera 和SpotLight 节点，用于定格动画玩具，并突出显示它们在场景中行走和跳舞的动作。

Skin 组件可驱动角色的蒙皮网格，而父Node 则作为包装器，用于定位和变换场景中的玩具角色。行走和舞蹈由Timeline 控制，而 则由TimelineAnimation 播放。动画数据通过KeyframeGroup 和Keyframe 元素定义，或通过keyframeSource 从二进制数据加载，后者提供了角色运动的关键帧。

该示例还使用共享的PrincipledMaterial 来定义动画人物的物理外观，包括base color 、roughness 、culling mode 和opacity 。该材质使用texture maps 作为基色，使用normal data 作为模型的 URL，并绑定到Texture 对象以进行加载。AnimationModel.qml 作为动画玩具的数据模型，存储纹理和网格源，以及每个玩具的眼睛位置和旋转等附加元数据。

响应式用户界面

用户界面在设计时考虑了不同窗口大小和orientations 的响应性。在玩具图库页面（ToyGalleryPage.qml ）中，玩具grid 会根据可用宽度自动调整列数，以便玩具卡片在portrait 和landscape 模式下都清晰可见，并保持一致的外观和感觉。

在其他页面中，portrait 和landscape 视图使用了不同的布局：在landscape 中，项目并排排列，而在portrait 中则使用单列布局，以便内容垂直堆叠。LayoutItemProxy 用于在这些布局中定位项目，而不会重复用户界面定义。

由于某些设计值（如项目大小、边距和字体）是为不同的基本分辨率指定的，因此示例使用ApplicationConfig.qml 根据实际屏幕分辨率缩放这些值。该文件还集中了源自原始设计规范的排版设置、字体族和窗口几何常量。

交互式 3D 视图

在自定义页面 (ToyCustomizePage.qml) 中，3D view 显示玩具和任何选定的附件。玩具由一个根Node 表示，有独立的身体部分，每个部分都有自己的建模Node 。三维视图可通过OrbitCameraController.qml 进行交互，用户可旋转玩具并从不同角度检查所附配件3D models ，同时DragHandler 可处理旋转手势。

源文件

示例项目 @ code.qt.io