玩具定制器

“玩具定制器”是一款基于QML构建的交互式3D应用程序，允许用户通过添加3D配件和面部特征来个性化定制玩具角色，这些元素会实时显示在玩具上。它演示了如何将 Qt Quick 3D 场景与标准 Qt Quick Controls ，从而构建直观的用户界面。

运行示例

您可以通过以下方式运行该示例：

• Qt Creator

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

• Qt Extension for Visual Studio Code

  在Command Palette 中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。

概述

该示例展示了一个使用 Qt Quick 3D。用户界面允许用户在不同的玩具之间进行选择，添加各种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 用于在这些布局中定位项目，而无需重复定义 UI 元素。

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

交互式 3D 视图

在自定义页面（ToyCustomizePage.qml ）中，3D view 会显示玩具及其所选的任何配件。玩具由根节点Node 表示，其身体各部分独立建模，每个部分都作为独立的Node 存在。通过OrbitCameraController.qml ，3D视图具备交互功能，用户可以旋转玩具并从不同角度查看所附配件3D models ，同时DragHandler 负责处理旋转手势。

源文件

示例项目 @ code.qt.io