장난감 커스터마이저

'장난감 커스터마이저'는 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: 튜토리얼: 빌드 및 실행을 참조하십시오.

개요

이 예제는 다음을 사용하여 실시간으로 렌더링된 3D 장난감 모델을 보여줍니다. Qt Quick 3D를 사용하여 실시간으로 렌더링된 3D 장난감 모델을 보여줍니다. 사용자 인터페이스를 통해 사용자는 다양한 장난감 중에서 선택하고, 여러 3D 액세서리와 얼굴 아이템을 부착하며, 3D 뷰에서 결과를 확인하면서 해당 액세서리의 색상을 조정할 수 있습니다.

레이아웃은 세로 및 가로 방향 모두에 맞춰지며, 이 예제는 WebAssembly(WASM) 플랫폼에서도 실행할 수 있습니다. 자세한 내용은 Qt for WebAssembly를 참조하십시오.

이 예제의 주요 특징:

• PrincipledMaterial 를 사용하여 장난감 모델에 대한 물리 기반 재질을 정의하는 방법.
• 2D QML 컨트롤과 3D 씬을 결합하는 방법.
• 더 나은 구조를 위해 재사용 가능한 QML 파일을 사용하여 컴포넌트를 구성하는 방법.
• 사용자가 3D 씬에서 드래그하여 3D 미리보기에서 장난감을 회전할 수 있도록 함.
• Timeline 및 TimelineAnimation 를 사용하여 첫 페이지의 장난감에 간단한 등장 및 춤 애니메이션을 추가하는 방법.

애플리케이션 구조

메인 QML 파일인 Main.qml 는 메인 애플리케이션 창을 정의하고 6개 페이지 간의 탐색을 관리합니다.

• 첫 번째 페이지: 장난감들이 화면 안으로 걸어 들어와 차례로 짧은 춤 애니메이션을 선보입니다.
• 갤러리 페이지: 장난감들이 격자 형태로 표시되며, 사용자는 그중 하나를 선택할 수 있습니다.
• 확인 페이지: 선택한 장난감에 대한 자세한 정보를 표시하고 확인을 요청합니다.
• 사용자 지정 페이지: 사용자가 장난감의 액세서리와 이름을 선택합니다.
• 주문 개요 페이지: 주문 완료 전에 현재 주문 내역을 요약해 보여줍니다.
• 마지막 페이지: 주문이 완료되었음을 확인하고, 사용자가 새로운 주문을 시작할 수 있게 합니다.

자산

자산은 아직 존재하지 않는 경우 빌드 시점에 다운로드됩니다. 다운로드가 완료되면 압축된 아카이브가 추출됩니다. 후속 빌드에서 추출된 자산 파일 중 변경된 파일이 있는 경우, 필요한 모든 자산을 확보하고 런타임 오류를 방지하기 위해 아카이브가 다시 추출됩니다. 자산 문제나 업데이트된 자산 패키지로 인해 빌드가 실패한 경우, 클린 빌드를 수행하면 다운로드된 아카이브와 추출된 파일이 모두 제거되어 다음 빌드가 새로운 상태에서 시작될 수 있습니다.

애니메이션

첫 번째 페이지에는 ‘ View3D ’가 있습니다. ‘ Texture ’는 3D 장난감에 이미지 기반 조명을 제공하는 HDR light probe 로 사용됩니다. 애니메이션된 장난감을 프레임에 담고 씬에서 걷기 및 춤추는 동작을 강조하기 위해 ‘ PerspectiveCamera ’ 및 ‘ SpotLight ’ 노드가 추가되었습니다.

캐릭터의 스킨이 적용된 메시를 구동하는 Skin 컴포넌트가 있으며, 부모 노드인 Node 는 장면 내에서 장난감 캐릭터의 위치와 변형을 제어하는 래퍼 역할을 합니다. 걷기와 춤추기는 TimelineAnimation 로 재생되는 Timeline 에 의해 제어됩니다. 애니메이션 데이터는 KeyframeGroup 및 Keyframe 요소를 사용하여 정의되거나, 캐릭터 모션의 키프레임을 제공하는 keyframeSource 를 통해 바이너리 데이터에서 불러옵니다.

또한 이 예제에서는 공유된 PrincipledMaterial 를 사용하여 base color, roughness, culling mode, opacity 등을 포함하여 애니메이션 캐릭터의 물리 기반 외관을 정의합니다. 이 머티리얼은 기본 색상으로 texture maps 을 사용하고, normal data 을 활용합니다. 이 두 URL은 모델에서 제공되며, 로딩을 위해 Texture 객체에 바인딩되어 있습니다. AnimationModel.qml 은 애니메이션 장난감의 데이터 모델 역할을 하며, 텍스처 및 메쉬 소스는 물론 각 장난감의 눈 위치 및 회전과 같은 추가 메타데이터도 저장합니다.

반응형 UI

이 UI는 다양한 창 크기와 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의 예제 프로젝트