Personalizador de juguetes

Toy Customizer es una aplicación 3D interactiva creada con QML que permite a los usuarios personalizar personajes de juguete colocándoles accesorios 3D y rasgos faciales que se colocan en el juguete en tiempo real. Demuestra cómo combinar las escenas 3D deQt Quick con el estándar Qt Quick Controls para crear una interfaz de usuario intuitiva.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creator, abra el modo Welcome y seleccione el ejemplo de Examples. Para obtener más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Visión general

El ejemplo presenta un modelo de juguete 3D renderizado en tiempo real utilizando Qt Quick 3D. La interfaz de usuario permite a los usuarios elegir entre diferentes juguetes, colocar varios accesorios 3D y elementos faciales, y ajustar los colores de dichos accesorios mientras se ve el resultado en la vista 3D.

El diseño se adapta a las orientaciones vertical y horizontal, y el ejemplo también puede ejecutarse en la plataforma WebAssembly (WASM); para más información, consulte Qt para WebAssembly.

El ejemplo destaca:

• El uso de PrincipledMaterial para definir materiales de base física para los modelos de juguete.
• Combinación de controles QML 2D con una escena 3D.
• Organización de componentes con archivos QML reutilizables para mejorar la estructura.
• Permitir a los usuarios rotar el juguete en la previsualización 3D arrastrando sobre la escena 3D.
• Añadir animaciones cortas de entrada y baile para los juguetes en la primera página usando Timeline y TimelineAnimation.

Estructura de la aplicación

El archivo QML principal, Main.qml, define la ventana principal de la aplicación y gestiona la navegación entre seis páginas.

• Primera página: los juguetes entran en escena y ejecutan breves animaciones de baile en secuencia.
• Página de la galería: se muestra una cuadrícula de juguetes y el usuario puede seleccionar uno.
• Página de confirmación: muestra más detalles sobre el juguete seleccionado y pide confirmación.
• Página de personalización: el usuario selecciona accesorios y un nombre para el juguete.
• Página de resumen del pedido: resume el pedido actual antes de finalizarlo.
• Página final: confirma que el pedido está completo y permite al usuario iniciar un nuevo pedido.

Activos

Los activos se descargan en el momento de la compilación si aún no están presentes. Una vez finalizada la descarga, se extrae el archivo comprimido. En compilaciones posteriores, si alguno de los archivos de activos extraídos ha cambiado, el archivo se extrae de nuevo para garantizar que todos los activos necesarios están disponibles y evitar fallos en tiempo de ejecución. Si una compilación falla debido a problemas con los activos o a un paquete de activos actualizado, al realizar una compilación limpia se eliminan tanto el archivo descargado como los archivos extraídos para que la siguiente compilación pueda comenzar desde cero.

Animaciones

La primera página tiene un View3D. Un Texture se utiliza como un HDR light probe que proporciona iluminación basada en imágenes para los juguetes 3D. Hay nodos PerspectiveCamera y SpotLight añadidos para enmarcar los juguetes animados y resaltar sus movimientos de caminar y bailar en la escena.

Hay un componente Skin que controla la malla con piel del personaje, mientras que un padre Node actúa como envoltorio para posicionar y transformar el personaje de juguete en la escena. El caminar y el bailar son controlados por un Timeline que es reproducido por un TimelineAnimation. Los datos de animación se definen utilizando elementos KeyframeGroup y Keyframe, o se cargan desde datos binarios a través de keyframeSource, que proporciona los fotogramas clave para el movimiento del personaje.

El ejemplo también utiliza un PrincipledMaterial compartido para definir el aspecto físico de los personajes animados, incluyendo base color, roughness, culling mode, y opacity. El material utiliza texture maps para el color base y normal data, que se proporcionan como URL desde el modelo y se vinculan a objetos Texture para su carga. AnimationModel.qml actúa como modelo de datos para los juguetes animados, almacenando fuentes de texturas y mallas, así como metadatos adicionales, como las posiciones de los ojos y las rotaciones de cada juguete.

Interfaz de usuario adaptable

La interfaz de usuario está diseñada para adaptarse a diferentes tamaños de ventana y orientations. En la página de la galería de juguetes (ToyGalleryPage.qml), el juguete grid ajusta automáticamente su número de columnas en función de la anchura disponible, de modo que las fichas de los juguetes permanezcan claramente visibles y mantengan un aspecto coherente tanto en el modo portrait como en el modo landscape.

En otras páginas, se utilizan diseños diferentes para las vistas portrait y landscape: los elementos se disponen uno al lado del otro en landscape, mientras que en portrait se utiliza un diseño de una sola columna para que el contenido se apile verticalmente. LayoutItemProxy se utiliza para posicionar los elementos dentro de estos diseños sin duplicar las definiciones de IU.

Dado que algunos valores de diseño, como el tamaño de los elementos, los márgenes y las fuentes, se especifican para una resolución base diferente, el ejemplo utiliza ApplicationConfig.qml para escalar estos valores según la resolución real de la pantalla. Este archivo también centraliza los ajustes de tipografía, las familias de fuentes y las constantes de geometría de ventana derivadas de las especificaciones del diseño original.

Vista 3D interactiva

En la página de personalización (ToyCustomizePage.qml), un 3D view muestra el juguete junto con cualquier accesorio seleccionado. El juguete está representado por una raíz Node con partes del cuerpo separadas, cada una modelada como su propio Node. La vista 3D es interactiva a través de OrbitCameraController.qml, que permite al usuario rotar el juguete e inspeccionar el accesorio conectado 3D models desde diferentes ángulos, mientras que un DragHandler maneja los gestos de rotación.

Archivos fuente

Proyecto de ejemplo @ code.qt.io